牛逼！保姆級(jí)教程：阿里云OSS文件上傳（分片上傳、斷點(diǎn)續(xù)傳）前后端實(shí)現(xiàn)(附源碼)

關(guān)于阿里云 OSS 的介紹請(qǐng)參考官方文檔：阿里云 OSS。

出于賬號(hào)安全的考慮，前端使用 OSS 服務(wù)需要走臨時(shí)授權(quán)，即拿一個(gè)臨時(shí)憑證（STS Token）去調(diào)用 aliyun-oss SDK。關(guān)于臨時(shí)授權(quán)請(qǐng)參考：RAM 和 STS 介紹，RAM 子賬號(hào)，STS 臨時(shí)授權(quán)訪問 OSS。

以 NodeJs 為例，后端給前端頒發(fā)臨時(shí)憑證的實(shí)現(xiàn)可參考：Node STS 授權(quán)訪問

前端上傳文件到阿里云的相關(guān)操作可參考：瀏覽器端上傳文件

了解以上概念之后，接下來可以去阿里云 OSS 的控制臺(tái)進(jìn)行相關(guān)的設(shè)置了（前提是開通了 OSS 服務(wù)）。

阿里云 OSS 控制臺(tái)配置

1. 創(chuàng)建 Bucket

首先，我們創(chuàng)建一個(gè) bucket，一個(gè)存儲(chǔ)文件的容器：

接著，我們需要給 bucket 設(shè)置跨域，這樣我們才能在網(wǎng)頁中調(diào)用 Aliyun OSS 服務(wù)器的接口：

2. 創(chuàng)建 RAM 用戶

接下來，前往 RAM 控制臺(tái)進(jìn)行子賬號(hào)和權(quán)限的配置。

首先，我們創(chuàng)建一個(gè)用戶，并給該用戶分配調(diào)用 STS 服務(wù) AssumeRole 接口的權(quán)限，這樣待會(huì)兒后端就能以該用戶的身份給前端分配 STS 憑證了：

我們需要保存一下該用戶的 access key 和 access key secret，后端需要以此核實(shí)用戶的身份。

3. 創(chuàng)建 RAM 角色

該角色即有權(quán)限在前端調(diào)用 aliyun-oss SDK 上傳文件的用戶角色，例如我們創(chuàng)建一個(gè)只有上傳權(quán)限的角色，命名為 uploader：

接下來我們需要給該角色分配權(quán)限，可以通過創(chuàng)建一條權(quán)限策略并分配給角色，該權(quán)限策略里面只包含了上傳文件、分片上傳相關(guān)的權(quán)限：

策略具體內(nèi)容為：

{
  "Version": "1",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "oss:PutObject",
        "oss:InitiateMultipartUpload",
        "oss:UploadPart",
        "oss:UploadPartCopy",
        "oss:CompleteMultipartUpload",
        "oss:AbortMultipartUpload",
        "oss:ListMultipartUploads",
        "oss:ListParts"
      ],
      "Resource": [
        "acs:oss:*:*:mudontire-test",
        "acs:oss:*:*:mudontire-test/*"
      ]
    }
  ]
}

然后，把該策略賦予 uploader 角色：

到此，阿里云 OSS 后臺(tái)相關(guān)配置結(jié)束。接下來，我們來關(guān)注前后端的實(shí)現(xiàn)。

后端實(shí)現(xiàn)

由于是前端負(fù)責(zé)上傳，所以后端的任務(wù)比較簡(jiǎn)單，就是提供一個(gè) STS Token 給前端。本文以 NodeJs 為例實(shí)現(xiàn)如下。

1. 安裝 aliyun-oss SDK

npm install ali-oss

2. 生成 STS Token 并返回

const OSS = require('ali-oss');
const STS = OSS.STS;

const sts = new STS({
  accessKeyId: process.env.ALIYUN_OSS_RULE_ASSUMER_ACCESS_KEY,
  accessKeySecret: process.env.ALIYUN_OSS_RULE_ASSUMER_ACCESS_KEY_SECRET
});

async function getCredential(req, res, next) {
  try {
    const { credentials } = await sts.assumeRole(
      'acs:ram::1582938330607257:role/uploader',  // role arn
      null, // policy
      15 * 60, // expiration
      'web-client' // session name
    );
    req.result = credentials;
    next();
  } catch (err) {
    next(err);
  }
}

其中，access key 和 access key secret 保存在.env文件中。sts.assumeRole()返回的即為 STS Token，方法接收的四個(gè)參數(shù)分別為：role arn, policy, expiration, session name。

Role arn 可以從 RAM 角色的詳情頁面獲?。?/p>

Policy 是自定義的策略，由于已經(jīng)為角色添加了權(quán)限策略，所以可以傳null。

Expiration 是 STS Token 的過期時(shí)間，應(yīng)該在 15min ~ 60min 之間。當(dāng) Token 失效時(shí)前端需要重新獲取。

Session name 為自定義的一個(gè)會(huì)話名稱。

后端實(shí)現(xiàn)完成！

前端實(shí)現(xiàn)

本文前端實(shí)現(xiàn)使用原生 JS，另外還有 ant design pro 的版本請(qǐng)參考 github 項(xiàng)目。

前端實(shí)現(xiàn)有幾個(gè)關(guān)鍵點(diǎn)：

  1. 調(diào)用 aliyun-oss SDK 之前獲取 STS Token

  2. 定義上傳分片大小，如果文件小于分片大小則使用普通上傳，否則使用分片上傳

  3. 上傳過程中能展示上傳進(jìn)度

  4. 上傳過程中，如果 STS Token 快過期了，則先暫停上傳重新獲取 Token，接著進(jìn)行斷點(diǎn)續(xù)傳

  5. 支持手動(dòng)暫停、續(xù)傳功能

  6. 上傳完成后返回文件對(duì)應(yīng)的下載地址

1. 引入 aliyun-oss SDK

參考 引入 aliyun-oss SDK

2. HTML

HTML 中包含文件選擇器，上傳、暫停、續(xù)傳按鈕，狀態(tài)顯示：

<div>
  <input type="file" id='fileInput' multiple='true'>
  <button id="uploadBtn" onclick="upload()">Upload</button>
  <button id="stopBtn" onclick="stop()">Stop</button>
  <button id="resumeBtn" onclick="resume()">resume</button>
  <h2 id='status'></h2>
</div>

3. 定義變量

let credentials = null; // STS憑證
let ossClient = null; // oss客戶端實(shí)例
const fileInput = document.getElementById('fileInput'); // 文件選擇器
const status = document.getElementById('status'); // 狀態(tài)顯示元素
const bucket = 'mudontire-test'; // bucket名稱
const region = 'oss-cn-shanghai'; // oss服務(wù)區(qū)域名稱
const partSize = 1024 * 1024; // 每個(gè)分片大小(byte)
const parallel = 3; // 同時(shí)上傳的分片數(shù)
const checkpoints = {}; // 所有分片上傳文件的檢查點(diǎn)

4. 獲取 STS 憑證，創(chuàng)建 OSS Client

// 獲取STS Token
function getCredential() {
  return fetch('http://localhost:5050/api/upload/credential')
    .then(res => {
      return res.json()
    })
    .then(res => {
      credentials = res.result;
    })
    .catch(err => {
      console.error(err);
    });
}

// 創(chuàng)建OSS Client
async function initOSSClient() {
  const { AccessKeyId, AccessKeySecret, SecurityToken } = credentials;
  ossClient = new OSS({
    accessKeyId: AccessKeyId,
    accessKeySecret: AccessKeySecret,
    stsToken: SecurityToken,
    bucket,
    region
  });
}

5. 點(diǎn)擊上傳按鈕事件

async function upload() {
  status.innerText = 'Uploading';
  // 獲取STS Token
  await getCredential();
  const { files } = fileInput;
  const fileList = Array.from(files);
  const uploadTasks = fileList.forEach(file => {
    // 如果文件大學(xué)小于分片大小，使用普通上傳，否則使用分片上傳
    if (file.size < partSize) {
      commonUpload(file);
    } else {
      multipartUpload(file);
    }
  });
}

6. 普通上傳

// 普通上傳
async function commonUpload(file) {
  if (!ossClient) {
    await initOSSClient();
  }
  const fileName = file.name;
  return ossClient.put(fileName, file).then(result => {
    console.log(`Common upload ${file.name} succeeded, result === `, result)
  }).catch(err => {
    console.log(`Common upload ${file.name} failed === `, err);
  });
}

7. 分片上傳

// 分片上傳
async function multipartUpload(file) {
  if (!ossClient) {
    await initOSSClient();
  }
  const fileName = file.name;
  return ossClient.multipartUpload(fileName, file, {
    parallel,
    partSize,
    progress: onMultipartUploadProgress
  }).then(result => {
    // 生成文件下載地址
    const url = `http://${bucket}.${region}.aliyuncs.com/${fileName}`;
    console.log(`Multipart upload ${file.name} succeeded, url === `, url)
  }).catch(err => {
    console.log(`Multipart upload ${file.name} failed === `, err);
  });
}

8. 斷點(diǎn)續(xù)傳

// 斷點(diǎn)續(xù)傳
async function resumeMultipartUpload() {
  Object.values(checkpoints).forEach((checkpoint) => {
    const { uploadId, file, name } = checkpoint;
    ossClient.multipartUpload(uploadId, file, {
      parallel,
      partSize,
      progress: onMultipartUploadProgress,
      checkpoint
    }).then(result => {
      console.log('before delete checkpoints === ', checkpoints);
      delete checkpoints[checkpoint.uploadId];
      console.log('after delete checkpoints === ', checkpoints);
      const url = `http://${bucket}.${region}.aliyuncs.com/${name}`;
      console.log(`Resume multipart upload ${file.name} succeeded, url === `, url)
    }).catch(err => {
      console.log('Resume multipart upload failed === ', err);
    });
  });
}

9. 分片上傳進(jìn)度

在 progress 回調(diào)中我們可以判斷 STS Token 是否快過期了，如果快過期了則先取消上傳獲取新 Token 后在從之前的斷點(diǎn)開始續(xù)傳。

// 分片上傳進(jìn)度改變回調(diào)
async function onMultipartUploadProgress(progress, checkpoint) {
  console.log(`${checkpoint.file.name} 上傳進(jìn)度 ${progress}`);
  checkpoints[checkpoint.uploadId] = checkpoint;
  // 判斷STS Token是否將要過期，過期則重新獲取
  const { Expiration } = credentials;
  const timegap = 1;
  if (Expiration && moment(Expiration).subtract(timegap, 'minute').isBefore(moment())) {
    console.log(`STS token will expire in ${timegap} minutes，uploading will pause and resume after getting new STS token`);
    if (ossClient) {
      ossClient.cancel();
    }
    await getCredential();
    await resumeMultipartUpload();
  }
}

10. 暫停、續(xù)傳按鈕點(diǎn)擊事件

// 暫停上傳
function stop() {
  status.innerText = 'Stopping';
  if (ossClient) ossClient.cancel();
}

// 續(xù)傳
function resume() {
  status.innerText = 'Resuming';
  if (ossClient) resumeMultipartUpload();
}

項(xiàng)目地址：https://github.com/MudOnTire/aliyun-oss-upload-demo

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容