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);
                    }
                }
            },

猜你喜欢

转载自www.cnblogs.com/tutao1995/p/11698017.html