微信小程序文件上传、下载-526互联

微信小程序的附件上传下载。上传后并支持打开

1、wxml 定义

　　　　　　　　　　　　　　　　　　<view>
                                <van-uploader
                                 class="autoField"
                                 bind:after-read="afterRead"
                                 accept="file"
                                 upload-text="上传附件"
                                 max-count="6"
                                 disabled="{{pageType !== 'add'}}"
                                >
                                    <text class="labelText" user-solt="label"> 上传附件</text>
                                    <van-button
                                     class="uploadButton"
                                     icon="upgrade"
                                     plain
                                     type="primary"
                                     size="small"
                                    >上传文件
                                    </van-button>
                                </van-uploader>
                                <view class="fileListBox">
                                    <view class="fileList">
                                        <text
                                         class="file"
                                         slot="button"
                                         size="small"
                                         type="default"
                                         wx:for="{{ fileList }}"
                                         wx:key="fileName"
                                         title="{{item.fileName}}"
                                         data-fileName="{{item.fileName}}"
                                         data-filePath="{{item.filePath}}"
                                         bind:tap="handleDownloadFile"
                                        >
                                            {{item.fileName}}
                                        </text>
                                    </view>
                                </view>
                            </view>

2、js方法定义

export const getToken = () => {
  return wx.getStorageSync(tokenKey)
}

afterRead(event) {
    const { file } = event.detail;
    const _this = this
    const header = {
      'content-type': 'application/json;charset=utf-8;',
    }
    if (getToken()) {
      header[tokenKey] = getToken()
    }
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    wx.uploadFile({
      url: getApp().globalData.baseURL + '/common/sysFile/uploadWx', // 仅为示例，非真实的接口地址
      filePath: file.url,
      name: 'file',
      header,
      formData: { "biz": 'gxjw', "fileName": file.name, "fileSourceId": this.data.temp.id || '', "fileType": '1' }, // filesourceId  就是member的id
      success(res) {
        console.log(res)
        // 上传完成需要更新 fileList
        let fileList = _this.data.fileList;
        file.fileName = file.name || ''
        file.filePath = JSON.parse(res.data).message || ''
        // fileList.push({ ...file, url: res.data });
        fileList.push({ ...file });
        console.log(9999, fileList, file)
        _this.setData({ fileList });
      },
    });
  },
  handleDownloadFile(e) {
    let data = e.currentTarget.dataset
    let url = data.filepath //this.data.pageType === 'add' ? JSON.parse(data.url).message : data.filepath
    const header = {
      'content-type': 'application/json;charset=utf-8;',
    }
    if (getToken()) {
      header[tokenKey] = getToken()
    }
    const newPath = `${wx.env.USER_DATA_PATH}/${url}`;
    console.log(99999, url)
    wx.downloadFile({
      // 示例 url，并非真实存在
      url: getApp().globalData.baseURL + '/' + url, // 仅为示例，非真实的接口地址 'http://example.com/somefile.pdf',
      filePath: newPath,
      header,
      timeout: 10000,
      success: function (res) {
        wx.openDocument({
          filePath: newPath,
          showMenu: true,
　　　　　　fileType: 'pdf',
          success: function (res) {
            console.log('打开文档成功')
          }
        })
      }
    })
  },