一、準備工作
1. 開通阿里雲OSS服務，從控制枱上獲取AccessKeyId和AccessKeySecret。
2. 創建Bucket，並登錄OSS控制枱
3. 配置Bucket
- 將allowed origins（來源）設置成 *
- 將allowed methods（允許methods）設置成 PUT, GET, POST, DELETE, HEAD
- 將allowed headers（允許headers）設置成 *
- 將expose headers（暴露headers）設置成 etag x-oss-request-id
可參考阿里官方文檔：https://help.aliyun.com/docum...
二、引入ali-oss
有兩種方式：
1. 在HTML文件的<head>中包含如下標籤：
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.1.min.js"></script>2. 項目中安裝ali-oss
npm install ali-oss --save可參考阿里官方文檔：https://github.com/ali-sdk/al...
這裏使用第二種。
三、使用OSS
關於直傳，阿里官方給了三種方案：
- 客户端 JavaScript 簽名後直傳；
- 客户端申請服務端簽名，然後打包上傳；
- 客户端申請服務端簽名，打包上傳OSS後回調服務端。
這裏使用第一種。
1. aliUploadDemo.component.html，使用input元素選擇文件
<input type="file" [(ngModel)]="fileVal" (change)="fileEvent($event)">
2. aliUploadDemo.component.ts
// 導入 ali-oss
import * as OSS from 'ali-oss'
...
export class AliUploadDemo{
client;
this.client = new OSS({
accessKeyId: 'your access key',
accessKeySecret: 'your access secret',
bucket: 'your bucket name',
region: 'oss-cn-hongkong'
});
// 獲取文件
fileEvent(fileInput: any) {
const file = fileInput.target.files[0] // 獲取文件資源
const reader = new FileReader()
if (file) reader.readAsDataURL(file) // 讀取文件
this.uploadFile(file); // 調用上傳方法
fileInput.target.value = '' // 重置以便下次可上傳同個文件（以通過change檢測）
}
/* 上傳文件至阿里雲OSS
* 官方解釋：通過new OSS來創建client，創建後返回的是Promise,
* 類似於callback的方式，在.then()中處理返回的結果，在.catch()中處理錯誤。
*/
uploadFile(file){
this.client.put(aliName, file.fileVal).catch((err) => {
if (err) {
console.log(err);
return;
}
}).then((result) => {
console.log(result);
}
}
至此，上傳操作已完成啦。可通過查看你的Bucket，或者通過返回的result，來確定上傳成功與否。
【參考資料】
- 阿里雲官方文檔：開始使用oss
- 阿里雲官方文檔：介紹如何在BrowserJS-SDK中快速使用訪問OSS服務
- 微信公眾號圖片上傳至阿里雲OSS
- 前端圖片直傳OSS試驗
- 如何基於OSS和MTS，快速搭建音視頻文件上傳服務？
聲明：轉發請註明出處，謝謝～
