Uniapp uploads and displays avatars locally, and converts avatars into Base64 format and stores them in MySQL database

The function you want to realize is ： Choose a picture locally as the avatar , Then put the picture as base64 The format is stored in the database .
The effect is as follows ：

1. This front-end page uses the free template shared by predecessors in the plug-in mall ：https://ext.dcloud.net.cn/plugin?id=2027
   

about html Some Click to get avatars, master has finished , There is no need to change this part in the following figure .

2. The next step is to convert the uploaded avatar into base64 Format
   

			avatarChoose() {
    
				let that = this;
				uni.chooseImage({
    
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
				  success: function (res) {
    
				    var tempFilePaths = res.tempFilePaths;
					pathToBase64(tempFilePaths[0])		// Image to base64 Tools 
					  .then(base64 => {
    
						console.log(base64);
						console.log(typeof(base64));
						that.avatar = base64;		// Convert the document to base64 And display 
						that.avatarUpload(base64);		// At the same time, upload the avatar to the database for storage 
					  })
					  .catch(error => {
    
					    console.error(error)
					  })
				  }
				});
			},

It's used here pathToBase64 This tool , So you need to download it in the plug-in market and introduce it into the project https://ext.dcloud.net.cn/plugin?id=123

Here I output the conversion result and the type of the result

You can see the display of the console , Successful transformation , and base64 The type is String character string

3. Now the avatar just uploaded can be displayed , The next step is to store the image in the database .
   In the last step of the previous code, I called avatarUpload function
   

So add code , Send data to the back end ：

			avatarUpload(avatar) {
    
				let that = this;
				var res = {
    
					"userId": that.userId,			// Corresponding to which user uploads the avatar 
					"avatar": avatar				// Successful transformation base64
				}
				uni.request({
    
				  url: "http://localhost:8080/user/avatarUpload",		// To back end 
				  data: JSON.stringify(res),		// Data to transfer 
				  header: {
     token: that.token },
				  method: "PUT",
				  success(r) {
    
				    console.log(r);
				    if (r.data.message == " Successful operation ") {
    
				      uni.showToast({
    
				        title: " Set up the success "
				      });
				    } else {
    
				      uni.showToast({
    
				        title: r.data.message,
				        icon: "error",
				      });
				    }
				  },
				  fail() {
    
				    uni.showToast({
    
				      title: " Network error ",
				      icon: "error",
				    });
				  },
				});
			},

4. For the back end , First, configure the database
   Add... To the table avatar attribute
   
   For this avatar Type of attribute , What I set up is mediumtext, Prevent overflow , That is to say base64 Is too long. , Fear varchar Class cannot survive .
   （ In fact, what I initially thought was that since it was String character string , Then set it to varchar, Then Baidu said varchar The maximum length of can reach 65535, So I wrote the length there 65535, The result is confirmed as soon as you enter , It automatically becomes mediumtext type , It can be said to be very intelligent …）

5. Then add... To the class avatar attribute
   

6. Finally, the backend Java stay controller Receive at
   

    @PreAuthorize(value = "hasAuthority('sys:put')")
    @ApiOperation(" Upload your avatar " )
    @PutMapping("/avatarUpload")
    public ResponseResult avatarUpload(@RequestBody @Valid User user) {
    
        int res = userService.updateUserById(user);
        Map<String, Integer> map = new HashMap<>();
        map.put(" Number of rows affected ",res);
        return new ResponseResult<Map>(200," Successful operation ", map);
    }

Because the front end only transmits userId and avatar, So call updateUserById Function to store the avatar in the database . Finally, you can see the running results ：

Storage success ！