微信小程序上传文件（可传 word、excel、ppt、视频、图片……）

前言

近期做技术调研时发现微信官方支持文件上传了，这里记录一下
官方 API：wx.chooseMessageFile(Object object)

交互：从微信聊天里选择文件（选一个好友/群聊，从你们聊天记录里的文件里选）

• 点红框是预览，点右上角圆圈才是选中（昨天做技术调研时点红圈部分是预览，搞得我还以为只支持图片选择）
  

示例代码

wx.chooseMessageFile({
  count: 10,
  type: 'all',
  success (res) {
    // tempFilePath可以作为 img 标签的 src 属性显示图片
    // const tempFilePaths = res.tempFiles
    
    const tempFilePaths = res.tempFiles[0].path
    const type = res.tempFiles[0].type
    console.log(tempFilePaths, "tempFilePaths")
    console.log(type, "type")
    /*
    // word excel ppt
    wxfile://tmp_1a3a5917bca43c3fa77c11df43d416df10e46c19618252e4.docx tempFilePaths
    file type
    
    wxfile://tmp_9453f576fe6bfd2b18cfdc62cb91bda439fc0e8013eb6f7701d3e8395d132018.xlsx tempFilePaths
    file type
    
    wxfile://tmp_48974d797db4b2ea7ad8db76106385989b5941c6bfdc5b5b186608263fac11b9.pptx tempFilePaths
    file type
    
    // 视频、图片
    wxfile://tmp_21c1296f0b72c8d33cae70c993d5b85d95439b4940b4c07e.mp4 tempFilePaths
    video type
    
    wxfile://tmp_611597681c099cacb86e353b0b71adcb13a65700f46e8be7.jpg tempFilePaths
    image type
    */
  }
})

能拿到文件临时地址就能配合文件上传 API 将文件传上去了

• 参考：微信小程序如何上传word,excel文件

  chooseUpload() {
    var that = this
    wx.chooseMessageFile({
      count: 10,
      type: 'file',
      extension: ['.xlsx', '.xls', '.XLSX', '.XLS', 'xlsx', 'xls', 'XLSX', 'XLS'],
      success(res) {
        const tempFilePaths = res.tempFiles
        for (var i in tempFilePaths) {
          wx.uploadFile({
            url: 'http://xxx', //上传的服务器地址
            filePath: tempFilePaths[i].path,
            name: 'file',
            formData: {
              'file': tempFilePaths[i].path
                   },

            header: {
              [wx.getStorageSync('tokenName')]: wx.getStorageSync('token'),
            },
            success: function (resp) {
              console.log(resp)
              var data = JSON.parse(resp.data)
              console.log(data)
              if (data.code == 200) {
                wx.showToast({
                  title: '上传成功',
                  icon: 'none',
                  duration: 1300
                })
              } else {
                wx.showToast({
                  title: data.message,
                  icon: 'none',
                  duration: 2000
                })
              }
            },
            fail: function (err) {
              console.log(err)
            }
          })
        }
      }
    })
  },