微信小程序 選擇圖片 並上傳到服務器

官方地址：https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html

 

選擇圖片以后，實際上圖片的本地地址：

http://tmp/rac1Gf3dvoNb27bf6bd54e09ef16b995c575fde40c8f.jpeg

這個看上去怪怪的，因為本地並沒有這樣的地址，不用管它，這個小程序能夠讀到就可以。

 

wx.chooseImage({
  success (res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //僅為示例，非真實的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success (res){
        const data = res.data
        //do something
      }
    })
  }
})

 

看一下服務器演示代碼：

@PostMapping("/upload")
    public Map<String, Object> fileUpload(MultipartFile file, HttpServletRequest req) {
        Map<String, Object> resultMap = new HashMap<>();

        // 得到上傳時的文件名
        String originName = file.getOriginalFilename();
        String strNewFileName = 
        ...
        file.transferTo(new File(folder, strNewFileName));
        ...
}

這個隨便找一下spring boot上傳文件的代碼就可以。

微信小程序上傳圖片，比想象中要簡單的多。