前言

微信小程序开发中一般会用到上传功能，而上传又分为从相册选择上传、从微信会话中选择上传，相册上传比较常见，会话则是微信小程序特有的

因为微信的跨平台性和限制，通用的选择附件功能最好是直接从微信会话中选择比较好，其很通用，支持更多附件类型

上传附件

上传附件，一般是从相册选择、从微信会话选择，两个是分开的，一般涉及到非图片的都是使用从微信会话选择，也有两者都使用的

• 从相册选择图片视频，可以使用 wx.chooseMedia ，若需要编辑、剪裁，可以分别使用 wx.editImage、 wx.cropImage，甚至还支持压缩 wx.compressImage
• 从微信聊天会话选择，可以使用 wx.chooseMessageFile

下面就以 wx.chooseMessageFile 为例，选择上传附件功能

const chooseUploadFile = ({
    count,
    size
} = {}) => {
    if (!count) count = 1
    if (!size) size = 2 * 1024 * 1024
    return new Promise((resolve, reject) => {
        wx.chooseMessageFile({
            count,
            success: (res) => {
                //这里让选一个
                const file = res.tempFiles[0]
                if (file.size > size) {
                    wx.showToast({
                        title: '大小超出限制',
                        icon: 'none'
                    })
                    reject(res)
                    return
                }
                //wx.uploadFile请求自己封装一下即可
                uploadFile(file).then((res) => {
                    resolve(res)
                }).then(err => {
                    reject(err)
                })
            },
            fail: (err) => {
                reject(err)
            }
        })
    })
}

//上传自己看着封装，有直接上传的，有预上传 + 上传
wx.uploadFile({
    url: ...,
    filePath: file.path,
    name: 'file',
    formData: {...},
    success: function (res) {},
    fail: function (error) {}
})

查看附件

这个跟普通移动端开发一不一样，可能移动端一个 url，无论是图片、网页、office都能显示，而小程序 webview 限制不较大就不行了，仅仅支持图片，仅仅支持图片的话还不如直接使用图片查看

因此查看附件将图片、office 等类型分离

• 通过校验扩展名类型来实现，因此上传时扩展名的要求比较重要了，当然也可以直接使用 mineType，这个就更细了，有些可能都不保存或者不正确哈，最好扩展名，扩展名差的太远就不管了
• 图片类型，一般都是 jpg|png|bmp|gif|svg|webp|svg 等，支持一些常用的，使用 wx.previewImage 可以打开(只要扩展名都是图片类型，就算是 jpg 改成 png 也没事，实际是根据图片二进制的前面字节识别)
• 视频类型，一般都是mp4、avi、wmv、mkv、flv等，使用 wx.previewMedia 可以访问，同时也支持图片访问
• 常见其他文件类型(office)，常见的doc、docx、xls、xlsx、ppt、pptx、pdf、wps、txt等，可以先使用 wx.downloadFile 下载到本地，然后使用 wx.openDocument 打开

if (/jpe{0,1}g|png|bmp|gif|svg|webp/.test(ext)) {
    //假设只支持这些图片类型
    wx.previewImage({
      urls: [url],
      success: (res) => {
        console.log(res)
      },
      fail: (err) => {
        console.log(err)
      }
    })
    return
} else if (/^(docx?|xlsx?|pptx?|pdf|wps|txt)$/.test(ext)) {
    //假设只支持这些 office 类型
    wx.showLoading({
      title: '加载中...'
    })
    //先使用 downloadFile 下载url 对应内容，然后使用 openDocument 打开
    wx.downloadFile({
      url: url,
      success: (res) => {
        wx.hideLoading()
        console.log(res)
        wx.openDocument({
          filePath: res.tempFilePath,
          success: (res) => {
            console.log(res)
          }, fail(err) {
            console.log(err)
            wx.showToast({
              title: '打开失败',
              icon: 'error'
            })
          }
        })
      }, fail: (err) => {
        wx.hideLoading()
        console.log(err)
        x.showToast({
          title: '下载失败',
          icon: 'error'
        })
      }
    })
} else {
    wx.showToast({
      title: '暂不支持打开此文件类型',
      icon: 'error'
    })
  }
}