小程序的 webview 上传附件并下载 及 微信服务号里上传附件并下载(vue项目) [流水账]

前言:

        小程序里的webview用不了小程序api，jssdk也没提供，只能使用 input 上传。

上传：

普通上传：

 <mt-button size="small" type="primary" style="position: relative;">
    上传
    <input
       type="file"
       accept="*"
       class="file_source"
       @change="chooseFile"
     />
  </mt-button>
  // 限制类型        accept="image/gif,image/jpeg,image/jpg,image/png,.rar,.zip,.xls,.xlsx,.doc,.docx,.txt,.pdf,.ppt"


methods: {
    async chooseFile (e) {
      let files = e.target.files

      let test = await this.checkUpload(files)
      if (test) {
        this.uploadFile(files[0])
      }
    },

    checkUpload (files) {
      // 校验格式
      let allowType = ['jpg', 
        'png', 'rar', 'txt', 'zip', 'doc', 'ppt', 'xls', 'xlsx', 'pdf', 'docx', 'gif']
      // 文件后缀
      let testMsg = files[0].name.substring(files[0].name.lastIndexOf('.') + 1)
      const isAllow = allowType.includes(testMsg)
      if (!isAllow) {
        Toast('不支持当前上传文件的格式!')
        return false
      }

      // 校验文件大小
      let defaultsSize = 5
      let isValid = true
      if (files[0].size > defaultsSize * 1024 * 1024) {
        isValid = false
        alert('附件大小不能超过 ${maxSize}MB!')
      }

      return isValid
    },

    uploadFile (file) {
      let that = this
      let reader = new FileReader()

      reader.readAsDataURL(file)

      reader.onloadstart = function () {
        // '正在上传...'
      }

      reader.onloadend = function () {
        try {
          let formData = new FormData()
          formData.append('file', file)

          apiUrl(formData).then((data) => {
            if (!data.isOk || !data.content) {
              alert(data.message || '上传失败')
              return
            }

            that.url = data.content.url
            that.id = data.content.id
          })
        } catch (e) { }
      } 
    }
}  


<style scoped>
     .file_source
      opacity 0
      position absolute
      width 100%
      height 100%
      left 0
      top 0
      z-index 99  
</style>  

vant上传：

<van-uploader
  v-model="statusFileList"
  upload-icon="plus"
  accept="*"
  :max-size="5* 1024 * 1024"
  :show-upload="isShowUpload"
  :before-read="beforeRead"
  :after-read="afterRead"
  @oversize="onOversize"
  @delete="handleDelete"
/>
// accept="image/gif,image/jpeg,image/jpg,image/png,.rar,.zip,.xls,.xlsx,.doc,.docx,.txt,.pdf,.ppt"

data () {
 return {
   statusFileList: [],
   isShowUpload: true    
 }
},

methods: {
   onOversize() {
      this.$toast('文件大小不能超过 5M!');
   },

   beforeRead (file) {
      let allowType = ['jpg', 'png', 'rar', 'txt', 'zip', 'doc', 'ppt', 'xls', 'xlsx', 'pdf', 'docx', 'gif']
      let testMsg = file.name.substring(file.name.lastIndexOf('.') + 1) // 文件后缀

      const isAllow = allowType.includes(testMsg)

      if (!isAllow) {
        this.$toast.fail('不支持当前上传文件的格式!')
        return false
      }
      return true
    },

    afterRead (files) {
      this.setStatusFileList('', 'uploading', '上传中...')

      try {
        this.isShowUpload = false
        let params = new FormData()
        params.append('file', files.file)

        apiUrl(params).then((data) => {
          if (!data.isOk || !data.content) {
            this.setStatusFileList('', 'failed', data.message || '上传失败')
            return
          }

          this.url = data.content.url
          this.id = data.content.id
          this.setStatusFileList(data.content.url, 'done', '')
        })
      } catch (e) {
        this.setStatusFileList('', 'failed', '上传失败')
      }
    },
    setStatusFileList (url='', status='', message='') {
      let fileItem = {
        url: url,
        status: status,
        message: message
      }
      this.statusFileList = [fileItem]
    },

    handleDelete () {
      this.isShowUpload = true
      this.statusFileList = []

      this.url = ''
      this.id = null
    }
}

下载：

解决方案：复制链接让用户自行去浏览器下载

步骤：

1. 安装

npm install vue-clipboard2 --save

2. 引入 以main.js 引入为例

import VueClipboard from 'vue-clipboard2'


Vue.use(VueClipboard)

3. 使用

<div @click="handleFileDownload">
    复制下载链接
</div>


handleFileDownload () {
   if (this.url) {
     this.$copyText(this.url).then(function (e) {
       alert('复制成功')
     }, function (e) {
       alert('复制失败')
     })
   }
}

方式二：

1. 安装  

npm install clipboard --save

2. 引入

import Clipboard from 'clipboard'

3. 使用

// 复制静态数据
<span
    class="urlContentCopyBtn"
    :data-clipboard-text="url"
    @click="handleCopyDownUrl">
    <el-button  type="primary" size="mini">
      复制下载链接
    </el-button>
</span>

methods: {
    handleCopyDownUrl () {
      if (this.url) {
        let clipboard = new Clipboard('.urlContentCopyBtn')
        clipboard.on('success', e => {
          this.$message.success('复制成功')
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制
          this.$message.error('该浏览器不支持复制')
          // 释放内存
          clipboard.destroy()
        })
      }
    },
}

// 复制动态数据

<div v-html="answer" class="modelContentDetailAnswer"></div> // 答案内容

<div class="copy_wrap">
  <i
    class="el-icon-document-copy copy_icon modelContentDetailCopyBtn"
    data-clipboard-action="copy"
    @click="handleModelContentDetailCopy"
  />
  复制  
</div>


methods: {
     handleModelContentDetailCopy () {
      let textValue = document.querySelector('.modelContentDetailAnswer')

      let clipboard = new Clipboard('.modelContentDetailCopyBtn', {
        target: function () {
          return textValue
        }
      })
      clipboard.on('success', e => {
        this.$message.success('复制成功')
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        this.$message.error('该浏览器不支持复制')
        // 释放内存
        clipboard.destroy()
      })
    }
}