【java小程序】上传头像的功能实现。

上传头像小程序端的页面代码和前面的注销代码一样，可以去【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/");
    }
}