oss多线程 上传_使用ali-oss阿里云服务分片上传(默认支持多线程)

项目里使用ali-oss，阿里云服务存文件。客户说上传太慢，这里分享一下自己总结的一些东西。

解决思路

接到需求首先看了一下，项目里使用的 browser-md5-file插件进获取文件md5码，这个插件处理速度属实感人。于是换了cnpm i -S spark-md5，自己测试300M文件速度直接比以前插件快一倍。

使用阿里云的分片上传 + 断点续传模式上传文件，官方说可以提高速度，具体没有试。

具体实现

Elementui 部分代码，不太懂的小伙伴可以去看看官网

class="upload-demo"

ref="upload"

action

:http-request="upLoad"

:on-success="success"

:accept="accept"

:on-preview="handlePreview"

:on-exceed="handleExceed"

:on-remove="handleRemove"

:file-list="fileList"

:before-upload="beforeAvatarUpload"

:auto-upload="false"

:limit="1"

>

上传按钮

//进度条部分

主要逻辑在upLoad函数里，对应上面elementui自定义上传，如下：

upLoad(item) {

//获取文件md5码，用于后台校验

this.checkMd5 = true;

let fileReader = new FileReader();

let dataFile = item.file

let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice

let spark = new SparkMD5.ArrayBuffer();

fileReader.readAsArrayBuffer(dataFile)

fileReader.onload = (e) =>{

spark.append(e.target.result);

let md5 = spark.end()

//请求是伪代码，根据自己项目去实现

axios.get('/api',params:{md5})

.then((info) => {

//info是返回的文件信息

if(info.id){ //文件在服务器已经存在

} else {

//文件不存在，执行上传

let checkpoint={}; //标记，记录断点信息

async function resumeUpload() {

for (let i = 0; i < 5; i++) {

try {

const result = await client.multipartUpload(filePath,file, {

checkpoint,

async progress(percentage, cpt) {

// console.log(percentage, cpt)

checkpoint = cpt;

that.showProgress = true;

that.progress = Math.floor(percentage * 100);

},

})

console.log(result); //可以根据result里的内容做一些别的事情，比如预览文件等。

break; // break if success

} catch (e) {

console.log(e);

}

}

}

resumeUpload();

}

})

}

}