SpringBoot+微信小程式實現檔案上傳與下載功能詳解

<!--檔案上傳與下載相關的依賴-->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.2</version>
</dependency>

@ApiOperation("檔案上傳")
    @PostMapping("/upload")
    public String upload(HttpServletRequest request, @RequestParam("file") MultipartFile file) throws IOException {
        if(!file.isEmpty()){
            //上傳檔案路徑
//            String path = request.getServletContext().getRealPath("/uploadFiles/");
            String path="E:/upload";
            //獲得上傳檔名
            String fileName = file.getOriginalFilename();
            File filePath = new File(path + File.separator + fileName);
            System.out.println(filePath);
            //如果檔案目錄不存在，建立目錄
            if(!filePath.getParentFile().exists()){
                filePath.getParentFile().mkdirs();
            }
            //將上傳檔案儲存到一個目標檔案中
            file.transferTo(filePath);
            return "success";
        }
        return "fail";
    }

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

<!--index.wxml-->
<view class="container">
 <button bindtap='upfile'>選擇上傳檔案</button>
</view>

//index.js
//獲取應用範例
var app = getApp()
Page({
  data: {
  },
  //事件處理常式
  upfile: function() {
    console.log("--bindViewTap--")

     wx.chooseImage({
       success: function(res) {
       var tempFilePaths = res.tempFilePaths
         wx.uploadFile({
           url: 'http://127.0.0.1:8001/file/upload',
           header: { "Content-Type": "multipart/form-data" },
           filePath: tempFilePaths[0],
           name: 'file',
           formData:{
            
           },
           success(res){
             console.log(res.data);
           }
         })
      }
     })

  },
  onLoad: function () {
  }
})

 @ApiOperation("檔案下載")
    @GetMapping("download")
    public ResponseEntity<byte[]> download(HttpServletRequest request,@RequestParam("file") String fileName) throws IOException {
        //下載檔案路徑
        String path="E:/upload";
        //構建將要下載的檔案物件
        File file = new File(path + File.separator + fileName);
        //設定響應頭
        HttpHeaders headers=new HttpHeaders();
        //下載顯示的檔名，解決中文名稱亂碼問題
        String downloadFileName=new String(fileName.getBytes("UTF-8"),"ISO-8859-1");
        //通知瀏覽器以下載方式(attachment)開啟檔案
        headers.setContentDispositionFormData("attachment",downloadFileName);
        //定義以二進位制流資料(最常見的檔案下載)的形式下載返回檔案資料
        headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
        //使用spring mvc框架的ResponseEntity物件封裝返回下載資料
        return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file),headers, HttpStatus.OK);
    }

<!--index.wxml-->
<view class="container">
  <view  bindtap="dian" class="userinfo">
    <image class="userinfo-avatar" src="{{avatar}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
  <image src='http://127.0.0.1:8001/file/download?file=ymwtyNjpeZq645b1d185a17eaa9a65398443fbc4f8dd.jpg' class="tu"></image>
    <view bindtap='dian2'>下載上圖</view>
  </view>
</view>

//index.js
//獲取應用範例
var app = getApp()
Page({
 
  data: {
    motto: 'Hello World',
    userInfo: {},

    avatar:null
  },
  //事件處理常式
  dian: function() {
    console.log("--bindViewTap--")
    var that = this;
    wx.downloadFile({
      // url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3018968254,2801372361&fm=26&gp=0.jpg',
      url:'http://127.0.0.1:8001/file/download?file=ymwtyNjpeZq645b1d185a17eaa9a65398443fbc4f8dd.jpg',
       type: 'image',
        success: function(res) {
          console.log(res)
         that.setData({avatar:res.tempFilePath})
          
        }
      })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //呼叫應用範例的方法獲取全域性資料
    app.getUserInfo(function(userInfo){
      //更新資料
      that.setData({
        userInfo:userInfo
      })
    })
  },
  dian2: function () {
    wx.downloadFile({
      url:'http://127.0.0.1:8001/file/download?file=ymwtyNjpeZq645b1d185a17eaa9a65398443fbc4f8dd.jpg',
      success: function (res) {
        console.log(res);
        var rr = res.tempFilePath;
        wx.saveImageToPhotosAlbum({
          filePath: rr,
          success(res) {
            wx.showToast({
              title: '儲存成功',
              icon: 'success',
              duration: 2000
            })
          }
        })
      }
    })
  }

})