小程序实现上传文件跟预览文件

小程序实现上传文件跟预览文件

上一篇文件整理了PC端后管的文件预览，产品姐姐这时候就问了句，不通过后管，只通过小程序能不能做到上传文件跟预览呢？我研究了一下发现是可行的，并且不难，这里整理出来了希望对一些刚入门的小白有所帮助

小程序上传附件（pdf,docx,xlsx）

诸多API的详情可以参考小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/

小程序上传我们可以写一个点击事件，调用wx.chooseMessageFile从客户端会话选择文件,然后在success回调里面调用wx.uploadFile上传API，这里的url就是你需要上传的地址，header是请求头，success回调的e就有上传后的路径啦！

// 核心JS
uploadFile(){
    wx.chooseMessageFile({
      count: 1, // 最多可以选择的文件个数，可以 0～100
      type: 'file', // 	所选的文件的类型
     success(res){
        const { tempFilePaths } = res // 返回选择的文件的本地临时文件对象数组
        const index = tempFilePaths[0].path.lastIndexOf('.')
        const urlSuffix = tempFilePaths[0].path.slice(index)
        const filename = `cms/files/${uuid()}${urlSuffix}`;
        wx.uploadFile({
           filePath: tempFilePaths[0].path,
           url: '', // 服务器地址
           name: 'file',
           header: {}, // 按需
           formData: {
            token: that.token, // 上传地址的token
            file: filename, // 文件名
            key: filename, // key
           },
           success(res1){
             const data = JSON.parse(res1.data)
              console.log('data Success', data)
           }
        })
     }
    })
}

小程序预览文件（doc,docx,xls,xlsx,ppt,pptx,pdf)

上传完成了，接下来就是在线预览，写一个点击事件，调用微信官方API wx.openDocument即可，但是wx.openDocument的filePath是需要本地路径的，我们要先调用wx.downloadFile下载文件资源，success回调里面会返回下载的本地路径，在拿这个路径去调用wx.openDocument就可以啦！是不是很简单很有趣的一件事

// 预览文件
seePreviewFile() {
  const url = '' // 为在线地址
  wx.downloadFile({ // 下载资源到本地
    url,
    success: (res) => {
      if (res.statusCode === 200) {
        const { filePath } = res;
        wx.openDocument({
          filePath, // 需本地路径，通过downloadFile获取
          showMenu: true,
          // fileType: '', // 文件类型 合法值 doc,,docx,xls,xlsx,ppt,pptx,pdf
          success(e) {
            console.log('打开文档成功', e);
          },
        });
      }
    },
  });
},

API调用注意

当你没有在小程序的后台配置域名的时候，手机调试需要开启开发者模式，这时候不配置也可以上传，但是发布到正式版则需要在程序后台配置合法域名（https://mp.weixin.qq.com/）如果使用uniapp开发小程序文档则参考https://uniapp.dcloud.net.cn/，基本上大同小异，把wx.xxxx换成uni.xxx即可