vue-simple-uploader超大文件分片秒传和断点续传

实例:

<!--属性表单-->
<el-dialog title="导入zip压缩文件" :visible.sync="importZipFile_dialog" width="900px" v-loading="myloading">
  <el-form label-position="right">

    <uploader :options="options" class="uploader-example" :autoStart="false"
              @file-added="fileAdded" @file-progress="onFileProgress" @file-success="onFileSuccess" @file-error="onFileError">
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop>
        <!--<p>拖动文件到此处上传</p>-->
        <uploader-btn :single="true">选择文件</uploader-btn>
        <!--<uploader-btn :attrs="attrs">选择图片</uploader-btn>-->
        <!--<uploader-btn :directory="true">选择文件夹</uploader-btn>-->
      </uploader-drop>
      <uploader-list ref="uploader_list">
      </uploader-list>
    </uploader>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="importZipFile_dialog = false">关 闭</el-button>
  </div>
</el-dialog>

全局变量:

var notUploadedChunkNumbers_zip = []; // 已经上传过的文件chunkNumber数组
var isUploaded_zip =false;// 文件已经上传成功了
return {

  /** 配置uploader组件的参数,导入zip文件的参数 */
  options: {
    // 可通过 https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js 示例启动服务
    target: '/api/goods/back/file/fileUpload',
    testChunks: false, // true 会一直返回 40005
    // testChunks: true,   //是否开启服务器分片校验
    // 服务器分片校验函数,秒传及断点续传基础
    checkChunkUploadedByResponse : function (chunk, message) {
        if( isUploaded_zip ){
          console.log("该文件已经上传成功!");
          return true; // return true 会忽略当前文件,不会再发送给后台
        }else{
          try {
            if(notUploadedChunkNumbers_zip.length > 0){ // notUploadedChunkNumbers_zip 未上传的 chunknumber
              return !(notUploadedChunkNumbers_zip.indexOf(chunk.offset + 1) >= 0); // return false会上传当前分片
            }else{
              return false;
            }
          } catch (e) {
            console.log("checkChunkUploadedByResponse error=",e);
          }
        }
    },
    chunkSize:3 * 1024 * 1024,
  },
importZipFile_dialog:false  
}

methods:{

           

/** 导入商品zip文件* */
opendialog_importZipFile(){
  this.importZipFile_dialog = true;//
}
// 上传单个文件
fileAdded(file, event){
  if(/zip/gi.test(file.fileType)){
    // this.panelShow = true;
    this.computeMD5(file);  // 生成MD5
  }else{
    this.$message({ message: "您上传的文件类型不正确,请上传zip文件", type: 'error'});
    return false;
  }
},
// 计算MD5值
computeMD5(file){
  var that = this;
  isUploaded_zip = false; // 这个文件是否已经上传成功过
  notUploadedChunkNumbers_zip = []; // 未成功的chunkNumber
  var fileReader = new FileReader();
  let time = new Date().getTime();
  let md5 = '';

  file.pause();

  fileReader.readAsArrayBuffer(file.file);
  fileReader.onload = function(e){
    if (file.size != e.target.result.byteLength) {
      this.error('Browser reported success but could not read the file until the end.');
      console.log("文件读取失败");
      return false;
    }
    md5 = SparkMD5.ArrayBuffer.hash(e.target.result, false);
    console.log(`MD5计算完毕:${file.id} ${file.name} MD5:${md5} 用时:${new Date().getTime() - time} ms`);
    file.uniqueIdentifier = md5;
    if(md5 != ""){
      checkFileMd5({"md5":md5}).then(res =>{
        if(res.status == 200){
          if(res.data.code == 100){// 上传成功过
            isUploaded_zip = true;
            that.$message({ message: "该文件已经上传成功过了,不能再上传了哦。", type: 'success' });
            file.cancel();
          }else if(res.data.code == 101){ // 该文件没有上传过
            isUploaded_zip = false;
            file.resume();
          }else if(res.data.code == 102){ // 如果102 ,返回未上传过的 chunkNumber 数组
            isUploaded_zip = false;
            notUploadedChunkNumbers_zip = res.data.data;
            file.resume();
          }else{}
        }else{}
      })
    }

    // 添加额外的参数
    // this.uploader.opts.query = {
    //   ...that.params
    // }
  };
  fileReader.onerror = function () {
    this.error('generater md5 时FileReader异步读取文件出错了,FileReader onerror was triggered, maybe the browser aborted due to high memory usage.');
    return false;
  };

},
// 上传进度
onFileProgress(rootFile, file, chunk) {
  console.log(`上传中 ${file.name},chunk:${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
},
// 上传成功
onFileSuccess(rootFile, file, response, chunk) { // 内部自动调用
  let res = JSON.parse(response);
  this.$message({ message: res.message, type: 'error' });
  if(res.status == 200){ //
    if(isUploaded_zip){ // 不要也可,file.cancel()后就不会onFileSuccess()
      this.$message({ message: "该文件已经上传成功过了,不能再上传了哦。", type: 'success' });
    }else{
      this.$message({ message: "上传成功!", type: 'success' });
      file.cancel();
    }
  }else{
    this.$message({ message: res.message, type: 'error' });
  }
},
onFileError(rootFile, file, response, chunk) {
  this.$message({
    message: response,
    type: 'error'
  })
},

}

 

参考学习:

转载:https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html#%E5%85%B3%E4%BA%8Evue-simple-uploader

github源码:https://github.com/shady-xia/Blog/tree/master/vue-simple-uploader

要实现上文件断点续传和进度显示,可以使用Vue-Simple-Uploader这个插件。下面是一个使用Vue-Simple-Uploader实现上文件断点续传和进度显示的示例: 首先,安装Vue-Simple-Uploader插件: ``` npm install vue-simple-uploader --save ``` 然后,在Vue组件中引入和使用Vue-Simple-Uploader插件: ```html <template> <div> <vue-simple-uploader ref="uploader" :multiple="false" :auto-upload="false" :chunk-size="chunkSize" :upload-url="uploadUrl" :headers="headers" :params="params" :with-credentials="withCredentials" @progress="onProgress" @chunk-success="onChunkSuccess" @success="onSuccess" @error="onError" > <button @click="uploadFile">上文件</button> </vue-simple-uploader> </div> </template> <script> import VueSimpleUploader from 'vue-simple-uploader'; export default { components: { VueSimpleUploader, }, data() { return { chunkSize: 1024 * 1024, // 每个分片的大小 uploadUrl: '/upload', // 上地址 headers: {}, // 请求头 params: {}, // 请求参数 withCredentials: false, // 发送跨域请求时是否携带cookie }; }, methods: { // 上文件 uploadFile() { this.$refs.uploader.upload(); }, // 上进度 onProgress(progress) { console.log(`上进度:${progress}%`); }, // 分片成功 onChunkSuccess(chunkResponse, chunkUploadParams, successChunks, totalChunks) { console.log(`分片成功:${chunkResponse}`); }, // 上成功 onSuccess(response, file, fileList) { console.log(`上成功:${response}`); }, // 上失败 onError(error, file, fileList) { console.log(`上失败:${error}`); }, }, }; </script> ``` 在上面的示例中,我们通过设置Vue-Simple-Uploader的props来实现上文件的一些配置,如每个分片的大小、上地址、请求头、请求参数等。然后,我们通过调用`this.$refs.uploader.upload()`方法来触发文件。在上过程中,Vue-Simple-Uploader会触发一些事件,如上进度、分片成功、上成功、上失败等,我们可以通过监听这些事件来实现断点续传和进度显示的功能。 其中,`@progress`事件会在上过程中定时触发,可以用来显示上进度;`@chunk-success`事件会在每个分片成功后触发,可以用来记录已经上分片;`@success`事件会在文件成功后触发,可以用来处理上成功后的逻辑;`@error`事件会在上失败后触发,可以用来处理上失败后的逻辑。 需要注意的是,为了实现断点续传功能,我们需要在后端实现接收分片、合并分片等功能。具体实现方式可以参考Vue-Simple-Uploader的文档。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值