当前位置 : 主页 > 网络编程 > JavaScript >

fileReader读取文件/FormData提交文件数据/SparkMD5校验文件唯一性

来源:互联网 收集:自由互联 发布时间:2021-06-28
chunkUploadMD5.js onFileChange(e) { var files = e.target.files || e.dataTransfer.files; if (!files.length)return; this.createChunk(files);},createChunk:function (rfile) { var vm = this; var blobSlice = File.prototype.slice || File.prototype
chunkUploadMD5.js
onFileChange(e) {
    var files = e.target.files || e.dataTransfer.files;
    if (!files.length)return;
    this.createChunk(files);
},
createChunk:function (rfile) {
    var vm = this;
    var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
        file = rfile[0],
        fileName = rfile[0].name,
        fileSize = rfile[0].size,

        chunkSize = 2*1024*1024,                          // Read in chunks of 2MB = 2097152
        chunks = Math.ceil(file.size / chunkSize),        // clip file to chunks
        currentChunk = 0,

        spark = new SparkMD5.ArrayBuffer(),               // return hex hash code
        fileReader = new FileReader();                    // create fileReader obj

    vm.thefilesize = (file.size/1024/1024).toFixed(2);

    fileReader.onload = function (e) {
        vm.hashTEXT = ((currentChunk/chunks)*100).toFixed(2);
        console.log('read chunk on', currentChunk + 1, 'of', chunks,':',((currentChunk/chunks)*100),'%');

        spark.append(e.target.result);                   // Append array buffer
        currentChunk++;

        if (currentChunk < chunks) {
            loadNext();                                  // Continue the next chunk
        } else {
            vm.fileHASH = spark.end();                   // finished sparkHash and return hashcode
            console.log('finished loading 100%');
            console.info('computed hash', vm.fileHASH);  // Compute hash
            vm.hashTEXT = 100;
            vm.files.push({
                "name":file.name,
                "file":e.target.result,
                "type":file.type,
            });
            console.log('chunkarr:',vm.chunkarr)
        }
    };

    fileReader.onerror = function () {
        console.warn('oops, something went wrong.');
    };

    function loadNext() {
        var start = currentChunk * chunkSize;
        var end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;

        var ckitem = {
            file:blobSlice.call(file, start, end),
            total_blob_num:chunks,
            blob_num:(currentChunk+1),
            file_name:file.name,
            begin:start,
            end:end
        }

        vm.chunkarr.push(ckitem);   // store each chunk

        if(!/(video)/.test(file.type)){
            fileReader.readAsDataURL(file); // create base64 data for image preview
        }else{
            fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
        }
    }

    loadNext();

},
/**
* do upload file by FormData
*/
doUploadChunk:function (i) {
    if($("#fileinput").val()==''){
        this.fail("内容不能为空");
        return false;
    }
    var vm = this;
    var fd = new FormData();            // 最好是新建一个空的FormData对象
    fd.append('file_hash',vm.fileHASH);                         // 文件哈希码
    fd.append('file',vm.chunkarr[i].file);                      // 文件块
    fd.append('total_blob_num',vm.chunkarr[i].total_blob_num);  // 总片段数
    fd.append('blob_num',vm.chunkarr[i].blob_num);              // 当前片段
    fd.append('file_name',vm.chunkarr[i].file_name);            // 当前片段

    var url = this.prefix+'/addArticleUpload/'+vm.$route.params.m_id+'?chunk='+i; 
    axios.post(url,fd).then(res=>{ 
        if(res.data.code==1){
            this.loadednum++;
            console.log('片段',i,'上传完成',this.percent)
            this.percent = (((this.loadednum)*(100/this.chunkarr[i].total_blob_num)).toFixed(2))+'%'; 
        }else if(res.data.code==3){
            console.log('片段',i,'上传失败',this.percent) 
        }else if(res.data.code==2){
            this.percent = '100%';
            this.success("全部上传成功") 
        } 
    }).catch(err=>{
        console.log('片段',i,'上传失败',this.percent)
    }) 
},
网友评论