Web端文件上傳至阿里雲OSS（基於Angular 5項目）

時間 2019-12-04

標籤 web 文件上傳阿里 oss 基於 angular 項目欄目 HTML 简体版

原文原文鏈接

1、準備工做

1. 開通阿里雲OSS服務，從控制檯上獲取AccessKeyId和AccessKeySecret。html

2. 建立Bucket，並登陸OSS控制檯前端

3. 配置Bucketgit

將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...github

2、引入ali-oss

有兩種方式：npm

1. 在HTML文件的<head>中包含以下標籤：segmentfault

<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...this

這裏使用第二種。阿里雲

3、使用OSS

關於直傳，阿里官方給了三種方案：spa

客戶端 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，來肯定上傳成功與否。

【參考資料】

聲明：轉發請註明出處，謝謝～