成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Web端文件上傳至阿里云OSS（基于Angular 5項(xiàng)目）

darkerXi / 3554人閱讀

摘要：一準(zhǔn)備工作開(kāi)通阿里云服務(wù)，從控制臺(tái)上獲取和。參考資料阿里云官方文檔開(kāi)始使用阿里云官方文檔介紹如何在中快速使用訪問(wèn)服務(wù)微信公眾號(hào)圖片上傳至阿里云前端圖片直傳試驗(yàn)如何基于和，快速搭建音視頻文件上傳服務(wù)聲明轉(zhuǎn)發(fā)請(qǐng)注明出處，謝謝

一、準(zhǔn)備工作

1. 開(kāi)通阿里云OSS服務(wù)，從控制臺(tái)上獲取AccessKeyId和AccessKeySecret。

2. 創(chuàng)建Bucket，并登錄OSS控制臺(tái)

3. 配置Bucket

將allowed origins（來(lái)源）設(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...

二、引入ali-oss

有兩種方式：

1. 在HTML文件的中包含如下標(biāo)簽：

2. 項(xiàng)目中安裝ali-oss

npm install ali-oss --save

可參考阿里官方文檔：https://github.com/ali-sdk/al...

這里使用第二種。

三、使用OSS 
關(guān)于直傳，阿里官方給了三種方案：



客戶端 JavaScript 簽名后直傳；


客戶端申請(qǐng)服務(wù)端簽名，然后打包上傳；


客戶端申請(qǐng)服務(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 = ""             // 重置以便下次可上傳同個(gè)文件（以通過(guò)change檢測(cè)）
}

/* 上傳文件至阿里云OSS
*  官方解釋：通過(guò)new OSS來(lái)創(chuàng)建client，創(chuàng)建后返回的是Promise,
*  類似于callback的方式，在.then()中處理返回的結(jié)果，在.catch()中處理錯(cuò)誤。
*/
uploadFile(file){
    this.client.put(aliName, file.fileVal).catch((err) => {
        if (err) {
            console.log(err);
            return;
        }
    }).then((result) => {
    console.log(result);
}

}

至此，上傳操作已完成啦。可通過(guò)查看你的Bucket，或者通過(guò)返回的result，來(lái)確定上傳成功與否。

【參考資料】

阿里云官方文檔：開(kāi)始使用oss

阿里云官方文檔：介紹如何在BrowserJS-SDK中快速使用訪問(wèn)OSS服務(wù)

微信公眾號(hào)圖片上傳至阿里云OSS

前端圖片直傳OSS試驗(yàn)

如何基于OSS和MTS，快速搭建音視頻文件上傳服務(wù)？

聲明：轉(zhuǎn)發(fā)請(qǐng)注明出處，謝謝～

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99798.html

相關(guān)文章

  • 微信公眾號(hào)圖片上傳至阿里云OSS

    摘要：最近在做微信公眾號(hào)，需要將圖片上傳至阿里云。利用模塊將圖片寫(xiě)到內(nèi)存微信多媒體文件文件路徑圖片上傳阿里云結(jié)果上傳文件出錯(cuò)這種方式將圖片暫存在內(nèi)存里面，那如果并發(fā)量很大，是不是內(nèi)存要爆炸了都感覺(jué)還是不可取。 最近在做微信公眾號(hào)，需要將圖片上傳至阿里云OSS。在做這個(gè)功能的過(guò)程中，我走了不少?gòu)澛?，嘗試過(guò)很多種方法，最后終于研究出一種便捷優(yōu)美的方式?，F(xiàn)在把這些方法和思路記錄下來(lái)，避免遺忘。 一...

    whatsns 評(píng)論0 收藏0

  • 基于Flask-Angular的項(xiàng)目組網(wǎng)架構(gòu)與部署

    摘要：基于網(wǎng)，分享項(xiàng)目的組網(wǎng)架構(gòu)和部署。項(xiàng)目組網(wǎng)架構(gòu)架構(gòu)說(shuō)明流項(xiàng)目訪問(wèn)分為兩個(gè)流，通過(guò)分兩個(gè)端口暴露給外部使用數(shù)據(jù)流用戶訪問(wèn)網(wǎng)站。通過(guò)進(jìn)行配置，使用作為異步隊(duì)列來(lái)存儲(chǔ)任務(wù)，并將處理結(jié)果存儲(chǔ)在中。 基于Raindrop網(wǎng)，分享項(xiàng)目的組網(wǎng)架構(gòu)和部署。 項(xiàng)目組網(wǎng)架構(gòu) showImg(https://cloud.githubusercontent.com/assets/7239657/1015704...

    kelvinlee 評(píng)論0 收藏0

  • 使用axios上傳文件到阿里云對(duì)象文件存儲(chǔ)服務(wù)器oss

    摘要：背景可用于圖片音視頻日志等海量文件的存儲(chǔ)。支持流式寫(xiě)入和文件寫(xiě)入兩種方式。這種方式的缺點(diǎn)是，文件要先上傳到應(yīng)用服務(wù)器，再上傳到，占用帶寬資源，過(guò)程雖然簡(jiǎn)單易于操作但是比較繁瑣。這里是上面服務(wù)端返回的簽名對(duì)象上傳文件名 背景 OSS可用于圖片、音視頻、日志等海量文件的存儲(chǔ)。各種終端設(shè)備、Web網(wǎng)站程序、移動(dòng)應(yīng)用可以直接向OSS寫(xiě)入或讀取數(shù)據(jù)。OSS支持流式寫(xiě)入和文件寫(xiě)入兩種方式。使用阿里...

    劉玉平 評(píng)論0 收藏0

  • 使用axios上傳文件到阿里云對(duì)象文件存儲(chǔ)服務(wù)器oss

    摘要：背景可用于圖片音視頻日志等海量文件的存儲(chǔ)。支持流式寫(xiě)入和文件寫(xiě)入兩種方式。這種方式的缺點(diǎn)是，文件要先上傳到應(yīng)用服務(wù)器，再上傳到，占用帶寬資源，過(guò)程雖然簡(jiǎn)單易于操作但是比較繁瑣。這里是上面服務(wù)端返回的簽名對(duì)象上傳文件名 背景 OSS可用于圖片、音視頻、日志等海量文件的存儲(chǔ)。各種終端設(shè)備、Web網(wǎng)站程序、移動(dòng)應(yīng)用可以直接向OSS寫(xiě)入或讀取數(shù)據(jù)。OSS支持流式寫(xiě)入和文件寫(xiě)入兩種方式。使用阿里...

    jas0n 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<