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

darkerXi 發布于2019-08-23 13:56 / 3549人閱讀

摘要：一準備工作開通阿里云服務，從控制臺上獲取和。參考資料阿里云官方文檔開始使用阿里云官方文檔介紹如何在中快速使用訪問服務微信公眾號圖片上傳至阿里云前端圖片直傳試驗如何基于和，快速搭建音視頻文件上傳服務聲明轉發請注明出處，謝謝

一、準備工作

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文件的中包含如下標簽：

2. 項目中安裝ali-oss

npm install ali-oss --save

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

這里使用第二種。

三、使用OSS

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

客戶端 JavaScript 簽名后直傳；

客戶端申請服務端簽名，然后打包上傳；

客戶端申請服務端簽名，打包上傳OSS后回調服務端。

這里使用第一種。

1. aliUploadDemo.component.html，使用input元素選擇文件

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，快速搭建音視頻文件上傳服務？

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

云服務器上傳文件至阿里云oss服務器阿里云oss掛載到服務器上傳文件文件上傳至阿里云服務器上通過郵件上傳文件至阿里云服務器上

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99798.html

微信公眾號圖片上傳至阿里云OSS

摘要：最近在做微信公眾號，需要將圖片上傳至阿里云。利用模塊將圖片寫到內存微信多媒體文件文件路徑圖片上傳阿里云結果上傳文件出錯這種方式將圖片暫存在內存里面，那如果并發量很大，是不是內存要爆炸了都感覺還是不可取。最近在做微信公眾號，需要將圖片上傳至阿里云OSS。在做這個功能的過程中，我走了不少彎路，嘗試過很多種方法，最后終于研究出一種便捷優美的方式。現在把這些方法和思路記錄下來，避免遺忘。一...

whatsns 2019-08-20 14:17 評論0 收藏0
基于Flask-Angular的項目組網架構與部署

摘要：基于網，分享項目的組網架構和部署。項目組網架構架構說明流項目訪問分為兩個流，通過分兩個端口暴露給外部使用數據流用戶訪問網站。通過進行配置，使用作為異步隊列來存儲任務，并將處理結果存儲在中。基于Raindrop網，分享項目的組網架構和部署。項目組網架構 showImg(https://cloud.githubusercontent.com/assets/7239657/1015704...

kelvinlee 2019-06-24 17:48 評論0 收藏0
使用axios上傳文件到阿里云對象文件存儲服務器oss

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

劉玉平 2019-08-02 16:02 評論0 收藏0
使用axios上傳文件到阿里云對象文件存儲服務器oss

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

jas0n 2019-08-22 18:04 評論0 收藏0