上传头像小程序端的页面代码和前面的注销代码一样,可以去【java小程序实战】小程序注销功能实现查看
文章目录
小程序端的js实现(mine.js)
1、微信小程序的图片选择,可以使用微信开发API中的wx.chooseImage.
2、上传文件API,wx.uploadFile
//上传头像
changeFace: function (){
var me = this;
console.log("changeFace");
//从本地相册选择照片或使用相机拍照
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album'],
success: function(res) {
var temFilePaths = res.tempFilePaths;
console.log(temFilePaths);
wx.showLoading({
title: '上传中...',
})
var serverUrl = app.serverUrl;
//上传api,成功返回获取的data是string类型,需要进行格式化
wx.uploadFile({
url: serverUrl+'/user/uploadFace?userId='+app.userInfo.id,
filePath: temFilePaths[0],
name: 'file',
header:{
'content-type':'application/json'
},
success:function(res){
var data = JSON.parse(res.data);
console.log(data);
wx.hideLoading();
if(data.status == 200){
wx.showToast({
title: '上传成功!',
icon: "success"
});
var imageUrl = data.data;//获取照片的地址
me.setData({
faceUrl: serverUrl + imageUrl
})
console.log(me.data.faceUrl);
} else if(data.status == 500){
wx.showToast({
title: data.msg,
});
}
}
})
},
})
}
java后台代码:
1、UserService接口
/**
* 用户修改信息
* @param users
*/
public void updataUserInfo(Users users);
2、UserServiceImpl实现类
上传头像成功后,将用户表中头像地址进行修改
@Override
public void updataUserInfo(Users users) {
Example userExample = new Example(Users.class);
Criteria criteria = userExample.createCriteria();
criteria.andEqualTo("id", users.getId());
usersMapper.updateByExampleSelective(users, userExample);
}
3、UserController接口实现
1、将用户上传的头像,保存在指定的文件目录下。
2、将头像的相对路径保存在数据库,并将地址返回给前端。
@RestController
@Api(value = "用户相关业务接口", tags = {"用户相关业务的controller"})
@RequestMapping("/user")
public class UserController extends BasicController {
@Autowired
private UserService userService;
@ApiOperation(value="用户上传头像" ,notes = "用户上传头像的接口")
@ApiImplicitParam(name = "userId", value = "用户id",required = true,
dataType = "String", paramType = "query")
@PostMapping("/uploadFace")
public IMoocJSONResult uploadFace(String userId, @RequestParam("file")MultipartFile[] files) throws Exception {
if(StringUtils.isBlank(userId)){
return IMoocJSONResult.errorMsg("用户Id不能为空");
}
//文件保存的命名空间
String fileSpace = "G:\\imooc-video-dev";
//保存到数据库的相对路径
String uploadPathDB = "\\" + userId + "\\face";
InputStream inputStream = null;
FileOutputStream fileOutputStream = null;
try{
if(files != null && files.length > 0){
//获取上传的文件名
String fileName = files[0].getOriginalFilename();
//如果文件名不为空
if(StringUtils.isNotBlank(fileName)) {
//文件上传的最终保存路径
String finalFacePath = fileSpace + uploadPathDB + "\\" +fileName;
//设置数据库保存的路径
uploadPathDB += ("\\" + fileName);
//创建文件
File outFile = new File(finalFacePath);
//判断outFile文件的父类文件不为null ,并且不是文件夹
if (outFile.getParentFile() !=null || !outFile.getParentFile().isDirectory()) {
//创建父文件夹
outFile.getParentFile().mkdirs();
}
// 输出文件流
fileOutputStream = new FileOutputStream(outFile);
//输入流
inputStream = files[0].getInputStream();
//将上传的文件copy到 路径下。
IOUtils.copy(inputStream, fileOutputStream);
}
} else {
return IMoocJSONResult.errorMsg("上传出错...");
}
} catch (Exception e){
e.printStackTrace();
return IMoocJSONResult.errorMsg("上传出错...");
} finally {
//关闭流
if(fileOutputStream != null) {
fileOutputStream.flush();
fileOutputStream.close();
}
}
//修改用户信息
Users users = new Users();
users.setId(userId);
users.setFaceImage(uploadPathDB);
userService.updataUserInfo(users);
String str = uploadPathDB.replace("\\","/");
return IMoocJSONResult.ok(str);
}
}
将图片通过web可以访问,进行虚拟路径配置
在application 的同级下,创建一个WebMvcConfig类
通过这样的配置类,进行配置,后台启动完毕,可以直接在浏览器进行访问。
@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/**")
.addResourceLocations("classpath:/META-INF/resources/")
.addResourceLocations("file:G:/imooc-video-dev/");
}
}