日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
React中阿里云OSS上傳文件的方法有哪些-創(chuàng)新互聯(lián)

小編給大家分享一下React中阿里云OSS上傳文件的方法有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元桂東做網(wǎng)站,已為上家服務(wù),為桂東各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

簡介

阿里云 OSS 是 阿里云提供的海量、安全、低成本、高可靠的云存儲服務(wù)，提供 99.9999999999%的數(shù)據(jù)可靠性（號稱）。能夠使用 RESTful API 可以在互聯(lián)網(wǎng)任何位置存儲和訪問，支持容量和處理能力彈性擴(kuò)展。

基本術(shù)語

1.bucket ：類似本地的一個(gè)文件夾
2.object ： oss 存儲數(shù)據(jù)的基本單元，類似本地的一個(gè)文件。
3.region：oss 存儲的數(shù)據(jù)中心所在區(qū)域
4.Endpoint：oss 對外服務(wù)的訪問域名，oss 以 http api 提供服務(wù)，不同 region 的 edpoint 不同。
5.AccessKey：訪問秘鑰，簡稱 AK,包括 AccessKeyId 和 AccessKeySecret，用于驗(yàn)證訪問者身份。后者必須保密

跨域 CROS 設(shè)置

進(jìn)入 控制臺-》基本設(shè)置-》跨域-》新增 彈出對話框以后填入來源：域名和端口信息。我們?nèi)绻褂妙愃浦?Azure 中 blob 網(wǎng)頁直接上傳的服務(wù)器的方式時(shí)需要配置跨域，域名和端口綁定我們的不同環(huán)境對應(yīng)的域名和端口

OSS 操作

創(chuàng)建文件存放位置

進(jìn)入控制臺-》創(chuàng)建 bucket -》填寫配置 -》完成

控制臺上傳下載（簡單測試）

文件管理-》創(chuàng)建目錄 -》上傳文件

生成 AccessKey 及 AccessSecrect

點(diǎn)擊頭像 -》AccessKey 管理 -》開始使用子用戶 Key -》填寫子用戶名，勾選編程訪問，確定 -》驗(yàn)證碼接受填寫，確定 -》得到 key 和 Secret -》權(quán)限管理-》授權(quán) -》新增管理對象存儲 OSS 權(quán)限

React中阿里云OSS上傳文件的方法有哪些

注意:這里必須使用子用戶的 key，如果用主賬號容易導(dǎo)致提交代碼時(shí)的權(quán)限泄露，一旦 key 和 secret 泄露相當(dāng)于賬號密碼泄露，服務(wù)器就完全暴露給了別人。

API 操作

實(shí)際項(xiàng)目中并不是依靠在控制臺手工操作，而是利用程序來控制上傳下載。OSS 提供了一系列的 restful API 來實(shí)現(xiàn)文件上傳于下載。

可以利用阿里云提供的 SDK 簡化實(shí)現(xiàn)。具體見下文。

前端上傳文件程序開發(fā)

基本流程

在實(shí)際項(xiàng)目中，一般采用分布式及微服務(wù)的 web 業(yè)務(wù)系統(tǒng)中，文件的上傳和下載都是直接在前端來實(shí)現(xiàn)對 oss 的操作。也就是前端直接上傳，不通過自己的服務(wù)器。這樣能夠?qū)崿F(xiàn)系統(tǒng)無阻礙的橫向擴(kuò)展。另一個(gè)原因是如果要把文件保存在運(yùn)行 web 服務(wù)器的同一臺服務(wù)器上時(shí)，那么在文件上傳時(shí)可能會占滿帶寬，影響 web 的訪問。分開存儲不占服務(wù)器帶寬。

阿里 OSS 提供了三種前端直傳方式：

1.瀏覽器簽名后直接上傳 OSS(無需服務(wù)端干預(yù))
2.瀏覽器請求服務(wù)器簽名地址后上傳(需要服務(wù)端配合)
3.瀏覽器請求服務(wù)器簽名地址后上傳并回調(diào)服務(wù)端(需要服務(wù)端配合)

實(shí)際生產(chǎn)環(huán)境考慮到安全性必須選擇第二種，需要服務(wù)端與前端相配合，當(dāng)安全性要求不高時(shí)可采用第一種方式。分別如下。

方式 1：前端直傳（無須服務(wù)端干預(yù)）

為保證文件的安全性，一般設(shè)置 bucket 為私有，也就是鑒權(quán)以后的用戶才能訪問 OSS 中的內(nèi)容。前端直傳的原理是在瀏覽器端根據(jù) OSS 控制臺提供的 AccessId 和 AccessSecret 生成簽名直接上傳，不需要經(jīng)過服務(wù)端，優(yōu)點(diǎ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í)間，超過這個(gè)失效時(shí)間之后，就沒有辦法通過這個(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,
 };
};

名稱欄目：React中阿里云OSS上傳文件的方法有哪些-創(chuàng)新互聯(lián)
文章來源：http://www.dlmjj.cn/article/cdcjoi.html