React實(shí)現(xiàn)阿里云OSS上傳文件的示例
簡(jiǎn)介
阿里云 OSS 是 阿里云提供的海量、安全、低成本、高可靠的云存儲(chǔ)服務(wù),提供 99.9999999999%的數(shù)據(jù)可靠性(號(hào)稱)。能夠使用 RESTful API 可以在互聯(lián)網(wǎng)任何位置存儲(chǔ)和訪問(wèn),支持容量和處理能力彈性擴(kuò)展。
基本術(shù)語(yǔ)
1.bucket :類似本地的一個(gè)文件夾
2.object : oss 存儲(chǔ)數(shù)據(jù)的基本單元,類似本地的一個(gè)文件。
3.region:oss 存儲(chǔ)的數(shù)據(jù)中心所在區(qū)域
4.Endpoint:oss 對(duì)外服務(wù)的訪問(wèn)域名,oss 以 http api 提供服務(wù),不同 region 的 edpoint 不同。
5.AccessKey:訪問(wèn)秘鑰,簡(jiǎn)稱 AK,包括 AccessKeyId 和 AccessKeySecret,用于驗(yàn)證訪問(wèn)者身份。后者必須保密
跨域 CROS 設(shè)置
進(jìn)入 控制臺(tái)-》基本設(shè)置-》跨域-》新增 彈出對(duì)話框以后填入來(lái)源:域名和端口信息。我們?nèi)绻褂妙愃浦?Azure 中 blob 網(wǎng)頁(yè)直接上傳的服務(wù)器的方式時(shí)需要配置跨域,域名和端口綁定我們的不同環(huán)境對(duì)應(yīng)的域名和端口
OSS 操作
創(chuàng)建文件存放位置
進(jìn)入控制臺(tái)-》創(chuàng)建 bucket -》填寫配置 -》完成
控制臺(tái)上傳下載(簡(jiǎn)單測(cè)試)
文件管理-》創(chuàng)建目錄 -》上傳文件
生成 AccessKey 及 AccessSecrect
點(diǎn)擊頭像 -》AccessKey 管理 -》開(kāi)始使用子用戶 Key -》填寫子用戶名,勾選編程訪問(wèn),確定 -》驗(yàn)證碼接受填寫,確定 -》得到 key 和 Secret -》權(quán)限管理-》授權(quán) -》新增管理對(duì)象存儲(chǔ) OSS 權(quán)限
注意:這里必須使用子用戶的 key,如果用主賬號(hào)容易導(dǎo)致提交代碼時(shí)的權(quán)限泄露,一旦 key 和 secret 泄露相當(dāng)于賬號(hào)密碼泄露,服務(wù)器就完全暴露給了別人。
API 操作
實(shí)際項(xiàng)目中并不是依靠在控制臺(tái)手工操作,而是利用程序來(lái)控制上傳下載。OSS 提供了一系列的 restful API 來(lái)實(shí)現(xiàn)文件上傳于下載。
可以利用阿里云提供的 SDK 簡(jiǎn)化實(shí)現(xiàn)。具體見(jiàn)下文。
前端上傳文件程序開(kāi)發(fā)
基本流程
在實(shí)際項(xiàng)目中,一般采用分布式及微服務(wù)的 web 業(yè)務(wù)系統(tǒng)中,文件的上傳和下載都是直接在前端來(lái)實(shí)現(xiàn)對(duì) oss 的操作。也就是前端直接上傳,不通過(guò)自己的服務(wù)器。這樣能夠?qū)崿F(xiàn)系統(tǒng)無(wú)阻礙的橫向擴(kuò)展。另一個(gè)原因是如果要把文件保存在運(yùn)行 web 服務(wù)器的同一臺(tái)服務(wù)器上時(shí),那么在文件上傳時(shí)可能會(huì)占滿帶寬,影響 web 的訪問(wèn)。分開(kāi)存儲(chǔ)不占服務(wù)器帶寬。
阿里 OSS 提供了三種前端直傳方式:
1.瀏覽器簽名后直接上傳 OSS(無(wú)需服務(wù)端干預(yù))
2.瀏覽器請(qǐng)求服務(wù)器簽名地址后上傳(需要服務(wù)端配合)
3.瀏覽器請(qǐng)求服務(wù)器簽名地址后上傳并回調(diào)服務(wù)端(需要服務(wù)端配合)
實(shí)際生產(chǎn)環(huán)境考慮到安全性必須選擇第二種,需要服務(wù)端與前端相配合,當(dāng)安全性要求不高時(shí)可采用第一種方式。分別如下。
方式 1:前端直傳(無(wú)須服務(wù)端干預(yù))
為保證文件的安全性,一般設(shè)置 bucket 為私有,也就是鑒權(quán)以后的用戶才能訪問(wèn) OSS 中的內(nèi)容。前端直傳的原理是在瀏覽器端根據(jù) OSS 控制臺(tái)提供的 AccessId 和 AccessSecret 生成簽名直接上傳,不需要經(jīng)過(guò)服務(wù)端,優(yōu)點(diǎn)是使用簡(jiǎn)單,缺點(diǎn)是不安全。
React 搭配 antd 中 upload 組件實(shí)現(xiàn)如下:
upload 組件提供了 beforeUpload
鉤子函數(shù),在執(zhí)行向 OSSpost 文件前我們先在本地計(jì)算好 OSS 要求的簽名,如下:
beforeUpload = async () => { const { OSSData } = this.state; const expire = OSSData.expire * 1000; if (expire < Date.now()) { await this.init(); } return true; }; init = async () => { try { const OSSData = await this.mockGetOSSData(); this.setState({ OSSData, }); } catch (error) { message.error(error); } }; mockGetOSSData = () => { var policyText = { expiration: "2020-12-01T12:00:00.000Z", //設(shè)置該P(yáng)olicy的失效時(shí)間,超過(guò)這個(gè)失效時(shí)間之后,就沒(méi)有辦法通過(guò)這個(gè)policy上傳文件了 conditions: [ ["content-length-range", 0, 1048576000], // 設(shè)置上傳文件的大小限制 ], }; let accesskey = "你自己的"; //不要泄露 var policyBase64 = Base64.encode(JSON.stringify(policyText)); let message = policyBase64; var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, { asBytes: true }); var signature = Crypto.util.bytesToBase64(bytes); return { dir: "user-dir/", //bucket中的路徑 expire: "0", //有效時(shí)間戳'1577811661', host: "http://om-test-oss.oss-cn-beijing.aliyuncs.com", accessId: "你自己的", policy: policyBase64, //you signature: signature, }; };
鉤子函數(shù)首先計(jì)算簽名是否過(guò)期,如果過(guò)期則通過(guò)init
函數(shù)間接調(diào)用mockGetOSSData
生成通過(guò) Base64 等 OSS 要求方法生成簽名數(shù)據(jù)。其中accessId
與accesskey
是從 OSS 控制臺(tái)拿到的。
生成簽名數(shù)據(jù)后,利用upload
組件中action
props 直接將文件上傳目的地指向 OSS 的實(shí)際有效地址,并進(jìn)行上傳
render() { const { value } = this.props; const props = { name: 'file', listType: "picture-card", fileList: value, action: this.state.OSSData.host, onChange: this.onChange, onRemove: this.onRemove, transformFile: this.transformFile, data: this.getExtraData, beforeUpload: this.beforeUpload, }; return ( <Upload {...props}> <Icon type="plus" /> </Upload> ); }
完整代碼如下:
render() { const { value } = this.props; const props = { name: 'file', listType: "picture-card", fileList: value, action: this.state.OSSData.host, onChange: this.onChange, onRemove: this.onRemove, transformFile: this.transformFile, data: this.getExtraData, beforeUpload: this.beforeUpload, }; return ( <Upload {...props}> <Icon type="plus" /> </Upload> ); }
方式 2:前端與后端配合上傳
后端鑒權(quán)接口
后端需要增加一個(gè)接口:后端利用阿里提供的 SDK,編寫鑒權(quán)接口,入?yún)⑹且蟼鞯奈募?nèi)容,根據(jù)控制臺(tái)得到的 endpoint、AccessKey 和 AccessSecret 實(shí)例化 client,每次前端上傳文件前請(qǐng)求本接口,服務(wù)端與阿里云 OSS 交互,根據(jù) bucket 拿到簽名后的上傳、下載地址(過(guò)程中可以設(shè)置上傳下載的有效期以及 Conetent-Type),將兩者以及文件名返回給前端,用于前端的下一步操作。
前端分別請(qǐng)求
前端然后根據(jù)后端鑒權(quán)接口返回簽名后的 puturl 采用 put 方式上傳圖片文件。在前端 put 上傳圖片成功后可以通過(guò) geturl 拿到圖片來(lái)進(jìn)行網(wǎng)頁(yè)回顯,回顯同時(shí)將圖片名稱插入到要提交表單中,最后點(diǎn)擊提交按鈕將圖片路徑等信息 post 到自己后端另一個(gè)接口中,后端保存到數(shù)據(jù)庫(kù)。
前端程序與上文中的方式 1 大同小異,唯一不同在于mockGetOSSData
函數(shù),之前是由前端計(jì)算簽名,這里是調(diào)用后端的鑒權(quán)接口來(lái)獲得簽名數(shù)據(jù)。
**注意:**最后一個(gè)接口調(diào)用中文件名稱只有后半部分,前半部分路徑是 OSS 提供的 bucket 路徑,完全相同,再次展示時(shí)前端自行拼接。
上傳中途失敗處理
上述前端直傳流程至少調(diào)用三個(gè)接口:鑒權(quán)、上傳、保存。如果在上傳文件后沒(méi)有調(diào)用保存接口,也就是應(yīng)用服務(wù)沒(méi)有把 OSS 中文件關(guān)聯(lián)到數(shù)據(jù)庫(kù)中時(shí)會(huì)造成 OSSbucket 中有臟數(shù)據(jù)的情況,解決辦法是:先讓用戶上傳到一個(gè)臨時(shí)的文件夾中,當(dāng)調(diào)用保存接口后再移動(dòng)到真正的 bucket 中,然后定時(shí)刪除臨時(shí)文件夾。
前端下載文件程序開(kāi)發(fā)
與上傳類似,OSS 也支持瀏覽器下載,在 bucket 的讀寫權(quán)限設(shè)置為私有后,讀寫均需簽名才可以。舉例如下:
如果上傳圖片到 OSS 成功后,得到的圖片 url 是user-dir/1580982085120.png
,如果直接拼接 OSS 前半部分為http://om-test-oss.oss-cn-beijing.aliyuncs.com/user-dir/1580982085120.png
訪問(wèn)會(huì)提示失敗,因?yàn)?OSS 有判斷沒(méi)有簽名信息會(huì)拒絕訪問(wèn),真正的簽名后的圖片地址是:http://om-test-oss.oss-cn-beijing.aliyuncs.com/user-dir/1580982085120.png?OSSAccessKeyId=LTAI4Fv75GobJhGFkwVzdPJq&Expires=1580983892&Signature=FZYmRRo6XnFu3INC55zJSdTWT%2Fc%3D
我們要做的就是得到簽名后的下載地址。下載與上傳相同,也分為是否需要服務(wù)器參與的兩種方式。
方式 1:前端簽名直接下載
前端簽名與上傳類似,根據(jù) AccessId 與 AccessSecret 來(lái)生成簽名信息。
簽名信息可以在請(qǐng)求攜帶在 URL 中也可以攜帶在請(qǐng)求 header 中,為方便使用,此次調(diào)研使用前者。
本地簽名使用了 OSS 提供的 SDK,react 首先安裝
npm install ali-oss --save
然后在組件中引入
import OSS from "ali-oss";
封裝 SDK 的簽名方法簡(jiǎn)化使用
import React, { Component } from "react"; import OSS from "ali-oss"; let GetOssfileClient = new OSS({ region: "oss-cn-beijing", //oss所在region,由運(yùn)維提供 accessKeyId: "你自己的", //oss的子accessKeyId,由運(yùn)維提供 accessKeySecret: "你自己的", //oss的子accessKeySecret,由運(yùn)維提供 bucket: "om-test-oss", //oss的buket名稱,運(yùn)維提供 }); export default GetOssfileClient;
上傳組件的預(yù)覽功能使用到了圖片下載如下:
//預(yù)覽可以使用本地圖片也可以使用上傳到oss真實(shí)圖片,這里使用真實(shí)地址用來(lái)測(cè)試對(duì)oss的訪問(wèn) handlePreview = (file) => { //file中thumbUrl是本地生成的,url是OSS文件名部分,需要簽名后才能訪問(wèn) console.log("替換前的 file.url", file.url); let url = GetOssfileClient.signatureUrl(file.url); console.log(url); file.url = url; //替換為簽名后的真實(shí)路徑, console.log("替換后的 file.url,也就是真實(shí)地址是:", file.url); this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true, }); };
這里使用 upload 組件預(yù)覽功能來(lái)測(cè)試圖片的下載顯示。當(dāng)點(diǎn)擊預(yù)覽觸圖標(biāo)時(shí)會(huì)觸發(fā)handlePreview
函數(shù),我們拿到真實(shí)圖片文件的文件名,然后使用 sdk 的signatureUrl
方法簽名后得到真實(shí)路徑,然后在 modal 中顯示。
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}> <img alt="example" style={{ width: "100%" }} src={previewImage} /> </Modal>
方式 2:前端根據(jù)后端返回的連接下載
同上述前端上傳文件程序開(kāi)發(fā)->方式2
,前端直接使用后端代碼返回的 url 來(lái)顯示圖片即可,后端返回的 url 已經(jīng)是簽名后的完整路徑了。
安全起見(jiàn),最好使用前后端配置上傳下載
到此這篇關(guān)于React實(shí)現(xiàn)阿里云OSS上傳文件的示例的文章就介紹到這了,更多相關(guān)React 阿里云OSS上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React?Suspense解決競(jìng)態(tài)條件詳解
這篇文章主要為大家介紹了React?Suspense解決競(jìng)態(tài)條件詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11基于visual studio code + react 開(kāi)發(fā)環(huán)境搭建過(guò)程
今天通過(guò)本文給大家分享基于visual studio code + react 開(kāi)發(fā)環(huán)境搭建過(guò)程,本文給大家介紹的非常詳細(xì),包括react安裝問(wèn)題及安裝 Debugger for Chrome的方法,需要的朋友跟隨小編一起看看吧2021-07-07React如何實(shí)現(xiàn)全屏監(jiān)聽(tīng)Esc鍵
這篇文章主要介紹了React如何實(shí)現(xiàn)全屏監(jiān)聽(tīng)Esc鍵,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08React學(xué)習(xí)筆記之高階組件應(yīng)用
這篇文章主要介紹了React 高階組件應(yīng)用,詳細(xì)的介紹了什么是React高階組件和具體使用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06React Hooks常用場(chǎng)景的使用(小結(jié))
這篇文章主要介紹了React Hooks常用場(chǎng)景的使用,根據(jù)使用場(chǎng)景分別進(jìn)行舉例說(shuō)明,幫助你認(rèn)識(shí)理解并可以熟練運(yùn)用 React Hooks 大部分特性,感興趣的可以了解一下2021-04-04ahooks封裝cookie?localStorage?sessionStorage方法
這篇文章主要為大家介紹了ahooks封裝cookie?localStorage?sessionStorage的方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07