資訊專欄INFORMATION COLUMN
摘要：一準備工作開通阿里云服務(wù)，從控制臺上獲取和。參考資料阿里云官方文檔開始使用阿里云官方文檔介紹如何在中快速使用訪問服務(wù)微信公眾號圖片上傳至阿里云前端圖片直傳試驗如何基于和，快速搭建音視頻文件上傳服務(wù)聲明轉(zhuǎn)發(fā)請注明出處，謝謝
一、準備工作
1. 開通阿里云OSS服務(wù)，從控制臺上獲取AccessKeyId和AccessKeySecret。
2. 創(chuàng)建Bucket，并登錄OSS控制臺
3. 配置Bucket
將allowed origins（來源）設(shè)置成 *
將allowed methods（允許methods）設(shè)置成 PUT, GET, POST, DELETE, HEAD
將allowed headers（允許headers）設(shè)置成 *
將expose headers（暴露headers）設(shè)置成 etag x-oss-request-id
可參考阿里官方文檔：https://help.aliyun.com/docum...
有兩種方式：
1. 在HTML文件的中包含如下標簽：
2. 項目中安裝ali-oss
npm install ali-oss --save
可參考阿里官方文檔：https://github.com/ali-sdk/al...
這里使用第二種。
三、使用OSS關(guān)于直傳，阿里官方給了三種方案：
客戶端 JavaScript 簽名后直傳；
客戶端申請服務(wù)端簽名，然后打包上傳；
客戶端申請服務(wù)端簽名，打包上傳OSS后回調(diào)服務(wù)端。
這里使用第一種。
1. aliUploadDemo.component.html，使用input元素選擇文件
2. aliUploadDemo.component.ts
// 導(dǎo)入 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); // 調(diào)用上傳方法
fileInput.target.value = "" // 重置以便下次可上傳同個文件（以通過change檢測）
}
/* 上傳文件至阿里云OSS
* 官方解釋：通過new OSS來創(chuàng)建client，創(chuàng)建后返回的是Promise,
* 類似于callback的方式，在.then()中處理返回的結(jié)果，在.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服務(wù)
微信公眾號圖片上傳至阿里云OSS
前端圖片直傳OSS試驗
如何基于OSS和MTS，快速搭建音視頻文件上傳服務(wù)？
聲明：轉(zhuǎn)發(fā)請注明出處，謝謝～
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99798.html
摘要：最近在做微信公眾號，需要將圖片上傳至阿里云。利用模塊將圖片寫到內(nèi)存微信多媒體文件文件路徑圖片上傳阿里云結(jié)果上傳文件出錯這種方式將圖片暫存在內(nèi)存里面，那如果并發(fā)量很大，是不是內(nèi)存要爆炸了都感覺還是不可取。 最近在做微信公眾號，需要將圖片上傳至阿里云OSS。在做這個功能的過程中，我走了不少彎路，嘗試過很多種方法，最后終于研究出一種便捷優(yōu)美的方式?，F(xiàn)在把這些方法和思路記錄下來，避免遺忘。 一...
摘要：基于網(wǎng)，分享項目的組網(wǎng)架構(gòu)和部署。項目組網(wǎng)架構(gòu)架構(gòu)說明流項目訪問分為兩個流，通過分兩個端口暴露給外部使用數(shù)據(jù)流用戶訪問網(wǎng)站。通過進行配置，使用作為異步隊列來存儲任務(wù)，并將處理結(jié)果存儲在中。 基于Raindrop網(wǎng)，分享項目的組網(wǎng)架構(gòu)和部署。 項目組網(wǎng)架構(gòu) showImg(https://cloud.githubusercontent.com/assets/7239657/1015704...
摘要：背景可用于圖片音視頻日志等海量文件的存儲。支持流式寫入和文件寫入兩種方式。這種方式的缺點是，文件要先上傳到應(yīng)用服務(wù)器，再上傳到，占用帶寬資源，過程雖然簡單易于操作但是比較繁瑣。這里是上面服務(wù)端返回的簽名對象上傳文件名 背景 OSS可用于圖片、音視頻、日志等海量文件的存儲。各種終端設(shè)備、Web網(wǎng)站程序、移動應(yīng)用可以直接向OSS寫入或讀取數(shù)據(jù)。OSS支持流式寫入和文件寫入兩種方式。使用阿里...
摘要：背景可用于圖片音視頻日志等海量文件的存儲。支持流式寫入和文件寫入兩種方式。這種方式的缺點是，文件要先上傳到應(yīng)用服務(wù)器，再上傳到，占用帶寬資源，過程雖然簡單易于操作但是比較繁瑣。這里是上面服務(wù)端返回的簽名對象上傳文件名 背景 OSS可用于圖片、音視頻、日志等海量文件的存儲。各種終端設(shè)備、Web網(wǎng)站程序、移動應(yīng)用可以直接向OSS寫入或讀取數(shù)據(jù)。OSS支持流式寫入和文件寫入兩種方式。使用阿里...
閱讀 829·2021-11-22 11:59
閱讀 3243·2021-11-17 09:33
閱讀 2312·2021-09-29 09:34
閱讀 1944·2021-09-22 15:25
閱讀 1960·2019-08-30 15:55
閱讀 1324·2019-08-30 15:55
閱讀 536·2019-08-30 15:53
閱讀 3351·2019-08-29 13:55
