vue-simple-uploader简单的分享

Posted 2023-04-04

参考技术A 百度上有很多vue-simple-uploader的使用说明，我就不说了。我只说下我所需要的功能。
一、先说下项目需求
（1）前端页面要批量上传数据
（2）数据大小不定，M、G、T，这是上传数据的大小范围
（3）重点来了，后端要求在上传之前，为每一条数据上传的时候携带一些需要的参数。例如：文件名、路径、session_id、文件权限等。
（4）暂时没有断点续传、切片等其他功能
二、遇到的问题
通过阅读simple-uploader文档、百度、Google等搜到的都是vue-simple-uploader的事件、方法、配置等使用方法。直接把所有的事件进行实现打印查看。并不能实现后端的要求。
三、解决过程
（1）公司大佬带着开始读simple-uploader的源码，重写方法都试了，还是不行。
（2）再次仔细的阅读了simple-uploader文档，发现配置项中一个字段 query ,它的描述是 query 其他额外的参数，这个可以是一个对象或者是一个函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式，默认为 。 。这感觉很容易忽略过去。。。
（3） query 可以是一个对象，然后就在里面写上自己需要的字段，重新上传文件，在每个 put 中发现都有 query 添加的字段。但是不能根据文件的不同来改变字段的值。
（4） query 描述中也说到可以是一个函数，然后就写成函数，然后进行测试，发现可以改变字段的值。选择文件之后，函数的第一个参数就是当前文件的信息，进行上传文件之后， put 中，每个消息都是当前文件的字段。完成后端要求。
下面就是我的options配置：

（5） put 每个文件给后端的字段，字段根据自己需求可变

vue vue-simple-uploader 前端的简单使用

前言

因为项目需要上传大文件tif图，考虑使用分片上传。

1、安装

npm install vue-simple-uploader --save

2、main.js中初始化

import uploader from \'vue-simple-uploader\'
Vue.use(uploader)

注：直接在vue文件中引用，居然加载不出来，不清楚原因

3、定义在template中的模板

点击查看代码

    <uploader
      ref="uploaderRef"
      :autoStart="false"
      :options="options"
      class="uploader-example"
      @file-success="onFileSuccess"
      @file-added="filesAdded"
      @file-error="onFileError"
      :file-status-text="fileStatusText"
    >
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop>
        <p>将文件拖放到此处以上传或</p>
        <!-- <uploader-btn>select files</uploader-btn> -->
        <uploader-btn :attrs="attrs" :single="true">选择遥感图片</uploader-btn>
        <!-- <uploader-btn :directory="true">select folder</uploader-btn> -->
      </uploader-drop>
      <uploader-list></uploader-list>
    </uploader>

4、定义在script中的数据

点击查看代码

import SparkMD5 from \'spark-md5\'
export default 
  props: 
    name: 
      type: String,
      default: \'file\'
    ,
    chunkSize: 
      type: Number,
      default: 0
    ,
    action: 
      type: String,
      default: \'http://xxx.xxx.xx\'
    
  ,
  data () 
    return 
      options: 
        target: this.action, // 目标上传 URL
        chunkSize: this.chunkSize, // 分块大小
        fileParameterName: this.name, // 上传文件时文件的参数名，默认file
        //  maxChunkRetries: 3, // 最大自动失败重试上传次数
        testChunks: false, // 是否开启服务器分片校验
        // // 服务器分片校验函数，秒传及断点续传基础
        checkChunkUploadedByResponse: function (chunk, message) 
          const objMessage = JSON.parse(message)
          if (objMessage.skipUpload) 
            return true
          

          return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0
        ,

        processParams (params) 
          console.log(params)

          // 每一次分片传给后台的参数，params是该方法返回的形参，包含分片信息
          return 
            // 返回一个对象，会添加到每一个分片的请求参数里面
            filename: params.filename,
            identifier: params.identifier,
            totalChunks: params.totalChunks,
            chunkNumber: params.chunkNumber,
            totalSize: params.totalSize
          
        ,
        headers: 
          // 在header中添加的验证，请根据实际业务来
          token: this.$store.getters[\'user/token\']
        
        // 自定义参数，随每一个切片发送
        //         query:
        //            //列如，参数id
        //             id:\'\'
        //         ,
      ,
      statusTextMap: 
        success: \'上传成功\',
        error: \'上传失败\',
        uploading: \'上传中\',
        paused: \'暂停中\',
        waiting: \'等待中\'
      ,
      attrs: 
        // 接受的文件类型，形如[\'.png\', \'.jpg\', \'.jpeg\', \'.gif\', \'.bmp\'...]
        accept: [\'.tif\', \'.tiff\']
      ,
      // 将不同的状态对应文字
      fileStatusText: (status, response) => 
        return this.statusTextMap[status]
      
    
  ,
  methods: 
    onFileSuccess (rootFile, file, response, chunk) 
      console.log(response)
      const res = JSON.parse(response)

      // 切片上传成功，调用合并
      if (res.code === 200) 
        this.$emit(\'needMerger\', file.uniqueIdentifier)
      
    ,
    onFileError (rootFile, file, response, chunk) 
      // 文件上传失败的回调
      console.log(rootFile, file, response, chunk)
      this.$emit(\'onFileError\')
    ,
    computeMD5 (file) 
      const loading = this.$loading(
        lock: true,
        text: \'正在计算文件大小\',
        spinner: \'el-icon-loading\',
        background: \'rgba(0, 0, 0, 0.7)\'
      )
      const fileReader = new FileReader()
      const time = new Date().getTime()
      const blobSlice =
        File.prototype.slice ||
        File.prototype.mozSlice ||
        File.prototype.webkitSlice
      let currentChunk = 0
      const chunkSize = 10 * 1024 * 1000
      const chunks = Math.ceil(file.size / chunkSize)
      const spark = new SparkMD5.ArrayBuffer()
      file.pause()

      loadNext()

      fileReader.onload = e => 
        spark.append(e.target.result)
        if (currentChunk < chunks) 
          currentChunk++
          loadNext()
          this.$nextTick(() => 
            console.log(
              \'校验MD5 \' + ((currentChunk / chunks) * 100).toFixed(0) + \'%\'
            )
          )
         else 
          const md5 = spark.end()
          loading.close()
          this.computeMD5Success(md5, file)
          console.log(
            `MD5计算完毕：$file.name \\nMD5：$md5 \\n分片：$chunks 大小:$
              file.size
             用时：$new Date().getTime() - time ms`
          )
        
      
      fileReader.onerror = function () 
        this.error(`文件$file.name读取出错，请检查该文件`)
        loading.close()
        file.cancel()
      

      function loadNext () 
        const start = currentChunk * chunkSize
        const end =
          start + chunkSize >= file.size ? file.size : start + chunkSize
        fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end))
      
    ,
    computeMD5Success (md5, file) 
      file.uniqueIdentifier = md5 // 把md5值作为文件的识别码
    ,
    filesAdded (file, event) 
      if (this.$refs.uploaderRef.files.length === 1) 
        // 只上传一张，将上一张覆盖
        this.$refs.uploaderRef.files[0].cancel()
      
      if (file.size / 1024 / 1024 / 1024 > 2) 
        // 文件不能大于2G
        this.form.videoUrl = \'\'
        this.$message.warning(\'文件大小不能超过2G\')
        setTimeout(() => 
          this.$refs.uploaderRef.uploader.removeFile(file)
        , 0)
        return false
      
      this.computeMD5(file)
    
  

5、在父组件中调用上传方法

点击查看代码

 <hr-upload
          name="remote"
          :chunkSize="10 * 1024 * 1024"
          :action="action"
          ref="upload"
          @onFileError="onFileError"
          @needMerger="needMerger"
        ></hr-upload>

this.$refs.upload.$refs.uploaderRef.files[0].resume()

6、预览

本文来自博客园，作者：一尘子!，转载请注明原文链接：https://www.cnblogs.com/mengqc1995/p/15716584.html