上傳頭像小程式端的頁面程式碼和前面的登出程式碼一樣，可以去【java小程式實戰】小程式登出功能實現檢視

文章目錄

• 小程式端的js實現（mine.js)
• java後臺程式碼：
• 1、UserService介面
• 2、UserServiceImpl實現類
• 3、UserController介面實現
• 將圖片通過web可以訪問，進行虛擬路徑配置

小程式端的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/");
    }
}