需求描述： 前端获取文件md5码且实现分片上传
步骤：
一：获取文件md5
? ? 1.插件spark-md5，还有另外一个插件（browser-md5-file）但是不兼容ie11，至于其他ie版本，未测
? ? 2.以分片的方式获取文件MD5码，一下为封装的方法：
?/**
???*?@param?file?文件
???*?@param?chunkSize?分片大小
???*?@returns?Promise
???*/
??const?getFileMd5?=?(file,?chunkSize)?=>?{
????return?new?Promise((resolve,?reject)?=>?{
??????setSpin({
????????spinning:?true,
????????tip:?'正在努力导入应用数据，请耐心等待......',
??????});
??????let?blobSlice?=?File.prototype.slice?||?File.prototype.mozSlice?||?File.prototype.webkitSlice;
??????let?chunks?=?Math.ceil(file.size?/?chunkSize);?//?总分片数
??????let?currentChunk?=?0;?
??????let?spark?=?new?SparkMD5.ArrayBuffer();
??????let?fileReader?=?new?FileReader();
??????fileReader.onload?=?function(e)?{
????????spark.append(e.target.result);
????????currentChunk++;
????????if?(currentChunk?<?chunks)?{
??????????loadNext();
????????}?else?{
??????????let?md5?=?spark.end();?//?结束时调用
??????????resolve(md5);
????????}
??????};
??????fileReader.onerror?=?function(e)?{
????????reject(e);
??????};
??????//?文件分片
??????function?loadNext()?{
????????let?start?=?currentChunk?*?chunkSize;
????????let?end?=?start?+?chunkSize;
????????if?(end?>?file.size)?{
??????????end?=?file.size;
????????}
????????fileReader.readAsArrayBuffer(blobSlice.call(file,?start,?end));
??????}
??????loadNext();
????});
??}
二、文件分片调取接口
??/**
???*
???*?@param?{Object}?file?文件
???*?@param?{Number}?index?下标
???*?@param?{Number}?chunkSize?分片数
???*?@param?{String}?md5?md5码
???*/
??const?fileImport?=?(file,?index,?chunkSize,?md5)?=>?{ // 获取MD5
????const?chunks?=?Math.ceil(file.size?/?chunkSize); // 防止文件截取不完整 所以向上取整
????if?(file)?{
??????let?upSize?=?index?*?chunkSize;
??????if?(index?>?chunks?-?1)?{
????????return;
??????}
??????let?blob?=?file.slice(upSize,?upSize?+?chunkSize);?//?截取文件
??????try?{
????????let?formData?=?new?FormData();
????????formData.append('file',?blob);
????????formData.append('md5',?md5);
????????formData.append('chunk',?index);
????????formData.append('chunks',?chunks);
????????sliceImportVisualization(formData).then(async?res?=>?{
??????????if?(res?.isSuccess)?{
????????????await?fileImport(file,?++index,?chunkSize,?md5);?//?在上一片传输完成后再调用?切记?切记
????????????const?{?data?=?{}?}?=?res;
????????????const?{?file_name?}?=?data;
????????????if?(file_name)?{
??????????????importVisualization({?file_name?}).then(res?=>?{
????????????????setSpin({spinning:?false});
??????????????});
????????????}
??????????}
????????});
??????}?catch?(err)?{
????????console.log('分片上传错误...',?err);
??????}
????}
??};
