微信小程序云开发实现上传文件和预览下载文件

一.前言

目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的path地址,文件名,文件的大小等。

获取这些信息再结合微信云开发提供的上传接口wx.cloud.uploadFile,即可实现文件上传。
下载需要微信提供的wx.downloadFile，预览需要微信提供的wx.openDocument，还需要wx.cloud.getTempFileURL，具体可看 微信开发文档。

二.具体实现

首先需要两个按钮来调用wx.chooseMessageFile和wx.cloud.getTempFileURL方法。wx.cloud.uploadFile根据wx.chooseMessageFile获得所需的参数，上传文件。

  uploadfile: function(){
    var that = this
    wx.chooseMessageFile({
      count: 1,//能选择文件的数量
      type: 'file',//能选择文件的类型,我这里只允许上传文件.还有视频,图片,或者都可以
      success(res) {
        //文件临时路径
        const tempFilePaths = res.tempFiles[0].path
		//后缀名的获取
        const houzhui = tempFilePaths.match(/\.[^.]+?$/)[0];
		//存储在云存储的地址
        const cloudpath = 'word/' + new Date().getTime() + houzhui;
        //获取fileID
        wx.cloud.uploadFile({
          cloudPath: cloudpath,
          filePath: tempFilePaths,
          success: res => {
            //存储fileID，之后用的到
            that.setData({
              fileid:res.fileID
            })
          },
          fail: err => {
            console.log(err)
          },
        })
      }
    })
  },
  

我们可以根据获得的fileID来通过wx.cloud.getTempFileURL去获得云存储的文件，然后再调用wx.downloadFile和wx.openDocument去实现预览。

openfile:function(){
    var fileid = this.data.fileid;
    var that = this;
    wx.cloud.getTempFileURL({
      fileList: [fileid],
      success: res => {
        that.setData({
        //res.fileList[0].tempFileURL是https格式的路径，可以根据这个路径在浏览器上下载
          imgSrc: res.fileList[0].tempFileURL
        });
        //根据https路径可以获得http格式的路径(指定文件下载后存储的路径 (本地路径)),根据这个路径可以预览
        wx.downloadFile({
          url: that.data.imgSrc,
          success: (res) => {
            that.setData({
              httpfile: res.tempFilePath
            })
            //预览文件
            wx.openDocument({
              filePath: that.data.httpfile,
              success: res => {
              },
              fail: err => {
                console.log(err);
              }
            })
          },
          fail: (err) => {
            console.log('读取失败', err)
          }
        })
      },
      fail: err => {
		console.log(err);
      }
    })
    
  }

三.结尾

如果觉得这篇文章对你有用的话,不要忘记评论点赞哦！