【微信小程序】上傳、下載文件 [精華帖少走彎路系列]

首先我們來看看將會用到的小程序API：

【上傳】：

1. wx.chooseMessageFile                                                                                                                                                                官方API地址https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html

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

【下載】：

1. wx.downloadFile                                                                                                                                                                       官方API地址https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html
2. wx.openDocument                                                                                                                                                                   官方API地址：https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html

 

正常大家的思路是這樣的：

上傳：從手機文件夾內，選取文件上傳到服務器

下載：點擊下載按鈕，能夠將文件下載到手機文件夾中

           奈何ios系統是閉源的，在手機上無法編輯，只能連接電腦，用電腦上的各類手機助手來打開手機裏的文件夾

         （ps：你要懂得你接觸的每個客戶，上至老年，這個步驟肯定是對ios用戶羣來說是喫力的）

 

目前在各個博客平臺，集思廣益找到了我認爲的最優方法：

【上傳】：從微信聊天界面的 文件傳輸助手 選取需要上傳的文件

主要實現代碼如下：

  // 上傳文件
  uploadFile: function () {
    let that = this;
    wx.chooseMessageFile({
      count: 1,
      type: 'file',
      success(res) {
        const tempFilePaths = res.tempFiles;
        console.log("臨時路徑：", tempFilePaths);
        wx.uploadFile({
          url: 'https://example.weixin.qq.com/upload', //僅爲微信官方示例，非真實的接口地址
          filePath: tempFilePaths[0].path,
          name: 'file',
          formData: {
            'user': 'test'
          },
          success(res) {
            const data = res.data
            console.log("data", data);
            wx.showToast({
              title: '上傳成功',
              icon: 'success',
              duration: 2000
            })
          }
        });
      }
    })
  },

【下載】：同理，將下載的文件預覽，右上角點擊轉發，轉發至 文件傳輸助手 

// 下載文件
  downFile: function () {
    let that = this;
    wx.downloadFile({
      url: 'https://lg-332ncmjq-1256907309.cos.ap-shanghai.myqcloud.com/stepking/a.xlsx',
      success: function (res) {
        var filePath = res.tempFilePath;
        console.log(res)
        wx.openDocument({
          showMenu:true,//這個參數一點要寫，不然只能預覽文檔，不能右上角轉發到聊天界面
          filePath: filePath,
          success: function (res) {
            console.log('打開文檔成功')
          }
        })
      }
    })
  }

 

好啦，大致就是這樣（綜合某度大家的智慧得出此流程），代碼小白一枚，請大神們輕噴~