前段事件，学习了下springboot的一些知识，现在复习一下，用springboot2结合小程序，实现一下前后端头像上传的功能。废话不多说，看具体代码，看不懂的小伙伴记得留言，我会一一解答。
springboot代码：
public class UploadUtils {
public static File getFileDir(String userId) {
String filePath = "/Users/wudengyao/111111springboot_upload/";
String childPath = userId+"/images/";
//如果上传目录为/static/images/upload/,则可以如下获取
File upload=new File(filePath,childPath);
if(!upload.exists()){
upload.mkdirs();
//在开发测试模式时，得到地址为：{项目跟目录}/target/static/images/upload/
//在打成jar正式发布时，得到的地址为:{发布jar包目录}/static/images/upload/
}
System.out.println(upload.getAbsolutePath());
return upload;
}
}
/**
* 图片上传
* @param userId
* @param file
* @return
*/
@PostMapping(value ="/upload",produces = {"application/json;charset=UTF-8"})
@ResponseBody
public Object upload(String userId,@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return ResponseResultUtil.fail(ResponseResultEnum.UNKNOWN.getCode(),
"上传失败，请选择文件");
}
String fileName = file.getOriginalFilename();
File upload = UploadUtils.getFileDir(userId);
File dest = new File(upload,fileName);
try {
file.transferTo(dest);
LOGGER.info("上传成功");
System.out.println(userId+"/images/"+fileName);
User user = new User();
user.setId(Integer.parseInt(userId));
user.setAvator(userId+"/images/"+fileName);
userService.updateUser(user);
return ResponseResultUtil.success("上传成功",user);
} catch (IOException e) {
LOGGER.error(e.toString(), e);
}
return ResponseResultUtil.fail(ResponseResultEnum.UNKNOWN.getCode(),
"上传失败");
}
这里头像上传成功之后，还有一部更新数据库用户头像的操作
User user = new User();
user.setId(Integer.parseInt(userId));
user.setAvator(userId+"/images/"+fileName);
userService.updateUser(user);
mapper里的sql语句.png
虚拟路径设置.png
如上图，这里要提的就是springboot2.x虚拟路径的设置，我这里把图片上传保存在了本地电脑的/Users/wudengyao/111111springboot_upload/目录下，然后具体路径再根据用户的userid建立子文件夹，虚拟路径设置完之后就能在本地通过url直接调用图片了
image.png
本地电脑的图片路径.png
小程序端代码：
/**
* 上传头像
*/
upload(userId,path, sCallback) {
wx.uploadFile({
url: config.api_base_url + 'user/upload?userId=' + userId,
filePath: path,
name: 'file',
header: {
"Content-Type": "application/x-www-form-urlencoded;text/html; charset=utf-8"
},
success(res) {
const data = JSON.parse(res.data);
console.log(config.api_base_url + data.data.avator);
sCallback(data);
}
})
}
小程序端的代码，就是请求的时候传递一个用户id和文件路径（由wx.chooseImage返回）
page页面代码：
uploadAvator(){
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success:(res)=>{
const tempFilePaths = res.tempFilePaths
console.log(tempFilePaths);
uploadModel.upload(this.data.user.id, tempFilePaths[0], (res) => {
this.setData({
avator: config.api_base_url + res.data.avator,
})
})
}
})
}
wxml代码
<button bindtap="uploadAvator">上传头像</button>
<image src="{{avator}}"></image>
效果图：
image.png
小程序日志
image.png
java后端日志
image.png
数据库
image.png
