OSS上传文件(前端js直传含进度条)

·  阅读 1115

本文主要讲解前端直接调用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可以自己实现

欢迎大家指正交流

分类:
前端
标签: