vue 文件分段上传
<div class="upload-item"> <div class="upload-item-title">样本上传</div> <div class="upload-content"> <el-upload class="upload-demo" ref="upload" drag action="string" accept="file" :http-request="selfUpload" :file-list="file_list" :limit=1 :before-upload="beforeUpload" :on-remove="removeUpload" :on-exceed="uploadExceed" :on-change="uploadChange" > <i class="el-icon-upload"></i> <div class="el-upload__text">请选择APK文件,或<em>点击上传</em></div> </el-upload> <div class="succ" v-show="resultSucc"><i class="el-icon-success"></i>上传成功</div> <el-progress :percentage="percent" :format="format" v-show="showPercen"></el-progress> </div> </div>
selfUpload(params){ let _this = this; let file = params.file; let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice, spark = new SparkMD5.ArrayBuffer(), fileReader = new FileReader(); fileReader.onload = function(e){ spark.append(e.target.result); _this.sendData.file_md5 = spark.end().toUpperCase() ; getInfo({ "fileMd5": _this.sendData.file_md5 }) .then( res => { let data = res.data.data; if(data){ _this.$message.error('该应用已上传,请重新选择'); _this.$refs.upload.abort(); _this.$refs.upload.clearFiles(); _this.removeUpload(); return false; } else{ _this.file = file; _this.sendData.sample_source_name = params.file.name; let time = new Date().getTime() _this.sendData.upload_file_name = time; let perSize = 1024*1024; let countSize = file.size/perSize; _this.fileStart = 0; _this.fileSize = file.size; let size = file.size/100; _this.chushu = Math.ceil(file.size/perSize);//次数 let yushu = file.size%perSize;//最后一次加 _this.finalSize = yushu _this.sendUpload(time) } }) } fileReader.readAsArrayBuffer(blobSlice.call(file, 0, file.size)); },
getFileBinary(file, cb) { var reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = function (e) { if (typeof cb === "function") { cb.call(this, this.result); } } },