zoukankan      html  css  js  c++  java
  • 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);
                        }
                    }
                },
  • 相关阅读:
    Hibernate+mysql 中文问题解决方案.
    FpSpread表格控件,FpSpread事件介绍(一)
    如何实现打开有宏的EXCEL时不提示
    使用VB.Net写一个简单的数据访问层(不能称ORM):CRUD操作
    Asp.NET 时间Since转换
    64位操作系统上。NET操作MSMQ的问题
    IIS7配置管理Windows2008 64位系统IIS7的问题
    数据库开发批量附加数据库
    IIS7中对静态文件的处理
    techsailor三步曲
  • 原文地址:https://www.cnblogs.com/tutao1995/p/11698017.html
Copyright © 2011-2022 走看看