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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM