OSS上传文件（前端js直传含进度条）

本文主要讲解前端直接调用ali-oss方法上传文件到阿里云，并支持显示上传进度条等功能。

该功能主要参考oss文档并结合自身项目需求，希望能给大家提供一些参考。

一、上传流程

1.引入ali-oss

npm install ali-oss
const OSS = require('ali-oss')

2.创建ossClient

// 为了保障安全性，临时token等参数需从后端获取
const ossClient = new OSS({    
  endpoint: endpoint,  // 为存储空间对应的地域域名，根据你的实际情况填写，如https://oss-cn-hangzhou.aliyuncs.com
  accessKeyId: credentials.accessKeyId,  //  你的阿里云accessKeyId
  stsToken: credentials.stsToken,   //  临时token  accessKeySecret: credentials.accessKeySecret,  //  你的阿里云accessKeySecret
  bucket: bucket  //  bucket所在的区域，如oss-cn-hangzhou
})

3.对文件进行切片,并调用uploadPart方法分块（Part）上传数据

// const fileconst file  // 要上传的文件
const partSize = 1024 * 1024  //  指定上传的每个分片的大小，范围为100 KB~5 GB。单个分片默认大小为1 * 1024 * 1024（即1 MB）
const fileSize = file.size
const name = 'object';
const result = await ossClient.initMultipartUpload(name)  //  返回OSS创建的全局唯一的uploadId
const uploadId = result.uploadId
const partNum = Math.ceil(file.size / partSize)  //  切片数（1-10000）
const done = []
const progress = 0
for (let i = 1; i <= partNum;) {
  const start = partSize * (i - 1)  //  分块开始位置
  const end = Math.min(start + partSize, fileSize)  //  分块结束位置
  const part = await ossClient.uploadPart(name, uploadId, i, file, start, end, {  
    timeout: 120000  //   超时时间
  })
  done.push({
    number: i,
    etag: part.etag
  })
  progress = end / fileSize  //  上传进度
  i++
}

4.将所有数据Part都上传完成后，调用CompleteMultipartUpload接口来完成整个文件的分片上传

const completeData = await ossClient.completeMultipartUpload(name, uploadId, done）

二.需要注意的点

1.在整个上传过程中临时token可能过期，在每次调用uploadPart上传分块的时候，需要判断token是否已过期，如过期需要重新获取token

2.上传分片时有可能超时等异常，推荐以下几种解决方案

添加重传机制，保证某一个分片上传失败后还可以继续上传
增大超时时间

const retryCountMax = 3 let retryCount = 0 upload() { ossClient.uploadPart(name, uploadId, i, file, start, end, {
timeout: 120000 // 超时时间 }) .then(res => {}) .catch(err => { console.log(err) if (retryCount < retryCountMax) { retryCount++ upload() } })}

写在最后

还可以实现手动暂停、续传功能，感兴趣等hxd可以自己实现

欢迎大家指正交流