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

最新推荐文章于 2024-08-23 11:34:37 发布

BrodZhu

最新推荐文章于 2024-08-23 11:34:37 发布

阅读量1.7k

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/BrodZhu/article/details/123901397

版权

本文介绍了在小程序中实现文件上传和下载的方法，包括使用普通HTML元素和Vant组件进行上传，同时详细阐述了文件格式和大小的校验过程。在下载部分，提供了两种复制链接实现下载的方案，并给出了相应的代码实现。

摘要由CSDN通过智能技术生成

前言:

小程序里的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(&#