uniapp实现从本地上传头像并显示，同时将头像转化为base64格式存储在mysql数据库中

想实现的功能为：从本地选择一张图片作为头像，然后将该图片以base64格式存储在数据库中。
效果如下：

1. 这个前端页面使用了插件商城里免费的前辈分享的模板：https://ext.dcloud.net.cn/plugin?id=2027
   

对于html部分点击获取头像前辈已经完成好，下图中的此部分无需更改。

2. 下一步要做的就是将上传的头像转化为base64格式
   

			avatarChoose() {
    
				let that = this;
				uni.chooseImage({
    
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
				  success: function (res) {
    
				    var tempFilePaths = res.tempFilePaths;
					pathToBase64(tempFilePaths[0])		//图像转base64工具
					  .then(base64 => {
    
						console.log(base64);
						console.log(typeof(base64));
						that.avatar = base64;		//将文件转化为base64并显示
						that.avatarUpload(base64);		//同时将头像上传至数据库进行存储
					  })
					  .catch(error => {
    
					    console.error(error)
					  })
				  }
				});
			},

这里使用了pathToBase64这个工具，所以需要去插件市场里下载并引入到项目中https://ext.dcloud.net.cn/plugin?id=123

我在此处输出了一下转化结果和结果的类型

可以看到控制台的显示，转化成功，而且base64的类型是String字符串

3. 现在已经能将刚刚上传的头像显示出来了，接下来就是将该图片存储在数据库中。
   在上段代码的最后一步调用了avatarUpload函数
   

所以添加代码，将数据传至后端：

			avatarUpload(avatar) {
    
				let that = this;
				var res = {
    
					"userId": that.userId,			//对应于哪个用户上传头像
					"avatar": avatar				//转化成功的base64
				}
				uni.request({
    
				  url: "http://localhost:8080/user/avatarUpload",		//传到后端
				  data: JSON.stringify(res),		//要传输的数据
				  header: {
     token: that.token },
				  method: "PUT",
				  success(r) {
    
				    console.log(r);
				    if (r.data.message == "操作成功") {
    
				      uni.showToast({
    
				        title: "设置成功"
				      });
				    } else {
    
				      uni.showToast({
    
				        title: r.data.message,
				        icon: "error",
				      });
				    }
				  },
				  fail() {
    
				    uni.showToast({
    
				      title: "网络错误",
				      icon: "error",
				    });
				  },
				});
			},

4. 对于后端，先要配置数据库
   在表中添加avatar属性
   
   对于这个avatar属性的类型，我设置的是mediumtext，防止溢出，就是说base64太长了，害怕varchar类性存不下。
   （其实我最初想的是既然是String字符串，那就设置成varchar，然后百度了一下说varchar的最大长度可以到65535，所以那里的长度我就写成了65535，结果一回车确定，它就自动变成了mediumtext类型，可以说很智能了…）

5. 然后在类中添加avatar属性
   

6. 最后后端的Java在controller处进行接收
   

    @PreAuthorize(value = "hasAuthority('sys:put')")
    @ApiOperation("上传头像" )
    @PutMapping("/avatarUpload")
    public ResponseResult avatarUpload(@RequestBody @Valid User user) {
    
        int res = userService.updateUserById(user);
        Map<String, Integer> map = new HashMap<>();
        map.put("影响行数",res);
        return new ResponseResult<Map>(200,"操作成功", map);
    }

这里因为前端只传了userId和avatar，所以调用updateUserById函数完成头像到数据库的存储。最后可以看到运行结果：

存储成功！