#需求：从聊天记录中选择文件，支持的文件格式doc, docx, pdf，同时支持上传的文档打开

文件选择与上传文件后展示模版代码：

<van-cell title="从微信聊天记录中上传" value="选择文件" is-link @click="chooseMessage" size="large" />

<div class="declare-file" v-for="(item,index) in chooseFileList" :key="index">
          <div>
            <img src="../../images/declare/declare_file.png" class="file-icon"/>
          </div>
          <div style="flex:1;">
            <p class="file-name" @click="openWordFn(item)">{
   
   {item.file_name}}</p>
            <van-progress v-if="item.percentage&&item.percentage < 100" :percentage="item.percentage" show-pivot="{
   
   {false}}"/>
          </div>
          <img v-if="item.percentage&&item.percentage != 100" src="../../images/declare/declare_close.png" class="file-close" @click="delFileFn(index)"/>
          <van-icon v-else name="ellipsis" size="16px" @click="editFileFn(index)"/>
        </div>

 选择文件并上传方法：

此方法包含进度条动画，小程序的api中有，小程序上传进度监听：UploadTask

chooseMessage() {
        let self = this;
        wx.chooseMessageFile({
          count: 1,
          type: 'file',
          extension: ['doc', 'docx', 'pdf'],
          success (res) {
            // tempFilePath可以作为img标签的src属性显示图片
            const tempFilePaths = res.tempFiles;
            let token = wx.getStorageSync('token');
            tempFilePaths.forEach((item) => {
              let newfilename = item.name + '';
              let _newFileName = newfilename.toLowerCase(); // 转为小写
              if (_newFileName.indexOf('.pdf') == -1 && _newFileName.indexOf('.docx') == -1 && _newFileName.indexOf('.doc') == -1) { // 我还限制了文件的大小和具体文件类型
                tip.toast('仅支持PDF、Word', '', 'none');
                return false;
              }
              if (item.size > 5242880) {
                tip.toast('最大支持5MB', '', 'none');
                return false;
              }
              item.percentage = 0;
              item.file_name = item.name;
              item.file_url = item.path;
              self.chooseFileList.push(item);
              let index = self.chooseFileList.length - 1;
              const uploadTask = wx.uploadFile({
                url: host + url,
                filePath: item.path,
                header: {
                  Authorization: 'Bearer ' + token
                },
                name: 'file',
                formData: {
                  type: 'common'
                },
                success(res) {
                  let d = JSON.parse(res.data);
                  if (d.ret == 0) {
                    self.chooseFileList[index].id = d.data.id;
                  } else {
                    tip.toast(d.msg, '', 'none');
                  }
                },
                fail(err) {
                  tip.toast(err, '', 'none');
                }
              });
              uploadTask.onProgressUpdate((res) => {
                // 上传进度条
                self.chooseFileList[index].percentage = res.progress
              })
            })
          }
        })
      },

上传成功或者详情页面，文档打开方法： 

小程序打开文件api

openWordFn(item) {
        this.$refs.showLoading.show();
        let fileType = item.file_name.slice(item.file_name.lastIndexOf('.') + 1);
        if (item.file_url.indexOf('http') == -1) item.file_url = `${hosturl}${item.file_url}`
        let self = this;
        wx.downloadFile({
          // 示例 url，并非真实存在
          url: item.file_url,
          success: function (res) {
            console.log(res, item.file_url)
            const filePath = res.tempFilePath
            wx.openDocument({
              fileType: fileType,
              filePath: filePath,
              success: function (res) {
                console.log('打开文档成功')
              },
              fail(err) {
                console.log(err)
              },
              complete() {
                self.$refs.showLoading.hide();
              }
            })
          },
          fail(err) {
            console.log(err)
          }
        })
      },

记录一次完整的小程序wepy+vant-ui框架，从上传文件（限制类型）到打开文档的流程。

开发中阅读问题，建议仔细阅读api文档，如果实在找不到，再去baidu，会节约很多时间， 开发文档：http://acconpit.com/52EU