微信小程序文件上傳 Java（附代碼）

微信小程序+Springboot實現文件上傳

微信小程序代碼

API接口：

1.從客戶端選擇文件：wx.chooseMessageFile

使用方法：

wx.chooseMessageFile({
  count: 10,
  type: 'image',
  success (res) {
    // tempFilePath可以作為img標簽的src屬性顯示圖片
    const tempFilePaths = res.tempFiles
  }
})

 

2.上傳文件：wx.uploadFile

 使用方法：

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
      }
    })
  }
})

 

upload.wxml

<view>
  <button bindtap="upImage">上傳圖片</button>
</view>
<view>
  <button bindtap="upFile">上傳文件</button>
</view>

 upload.js

upImage: function() {
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function(res) {
        const tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          url: 'http://localhost/picture',
          filePath: tempFilePaths[0],
          name: 'file',

          success(res) {
            console.log("success")
            console.log(res)
          },
          fail(res) {
            console.log("失敗")
            console.log(res)
          }
        })
      },
    })
  },
  upFile: function() {
    wx.chooseMessageFile({
      count: 1,
      type: 'file',
      success(res) {
        const tempFilePaths = res.tempFiles
        wx.uploadFile({
          url: 'http://localhost/picture',
          filePath: tempFilePaths[0].path,
          name: 'file',
          success(res) {
            console.log("success")
            console.log(res)
          },
          fail(res) {
            console.log("失敗")
            console.log(res)
          }
        })

      }
    })
  },

 Java代碼

upload.java

@RequestMapping(value = "/picture", method = RequestMethod.POST)
    public String uploadPicture(HttpServletRequest request, HttpServletResponse response, @RequestParam("file") MultipartFile files) throws Exception {
        try {
            System.out.println("圖片上傳請求成功");
            String type = files.getOriginalFilename().substring(files.getOriginalFilename().lastIndexOf("."));
            String path = "E:/demo/image/upload";
            File fileParent = new File(path);
            if (!fileParent.exists()) {
                fileParent.mkdirs();
            }
            File targetFile = new File(path + "/", files.getOriginalFilename());
            if (!targetFile.exists()) {
                targetFile.createNewFile();
            }
            files.transferTo(targetFile);
            return files.getOriginalFilename();
        } catch (Exception e) {
            return "上傳失敗";
        }
    }

服務器配置注意項

配置服務器域名

 

如果拋出以下異常請檢查域名配置是否正確

如果域名配置正確並且 wx.uploadFile 中 url 參數准確無誤嘗試以下辦法