本文共 5127 字，大约阅读时间需要 17 分钟。

上传头像小程序端的页面代码和前面的注销代码一样，可以去查看

小程序端的js实现（mine.js)

1、微信小程序的图片选择，可以使用微信开发API中的wx.chooseImage.

//上传头像  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、将用户上传的头像，保存在指定的文件目录下。

@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类

@Configurationpublic class WebMvcConfig extends WebMvcConfigurerAdapter {    @Override    public void addResourceHandlers(ResourceHandlerRegistry registry)  {        registry.addResourceHandler("/**")                .addResourceLocations("classpath:/META-INF/resources/")               .addResourceLocations("file:G:/imooc-video-dev/");    }}

转载地址：http://sjfoi.baihongyu.com/