1、介紹
最近開發了一個項目，其中需要一個上傳圖檔到阿裡雲的 oss 上面，就是上傳圖檔到阿裡雲的 oss 上面。
因為之前開發過 vue 的阿裡雲 oss 上傳，是以直接複制粘 vue 的元件。
因為我做的是 react 的項目，是以需要稍微修改。
介于以後會經常用到，是以決定将它封裝成元件，并且添加到 npm 包裡面。
xl_alioss_vue : 這個是 vue 的 NPM 包
xl_alioss_react : 這個是 react 的 NPM 包
2、項目的安裝和預覽
xl_alioss_vue 的安裝和應用
安裝：
yarn add xl_alioss_vue
使用：
<template>
<FileUpload url="http://127.0.0.1:8081/common/upload/alioss/vue"
v-on:upLoadImgEnd="upLoadImgEnd"
v-on:upload="upload" >
<img v-if="imgUrl" :src="imgUrl" alt="">
<p v-if="!imgUrl">點選上傳</p>
</FileUpload>
</template>
<script>
// 引入 xl_alioss_vue
import FileUpload from 'xl_alioss_vue'
export default {
components: {
FileUpload
},
data() {
return {
imgUrl:''
}
},
methods:{
upLoadImgEnd(data){
this.imgUrl = data
},
upload(data,file,startLoad){
upload(Object.assign({},data,{file}))
}
},
created() {
},
}
</script>
這裡可以看到 xl_alioss_vue 插件有三個屬性：
- url ：這個url 是請求一些 alioss 認證的資訊的。（ 由開發後端提供，後面将alioss 時候，介紹下 ）
- upLoadImgEnd(data) 上傳結束後函數，data 為傳回的圖檔 url
- upload (data,file,startLoad) 這裡如果沒有的這個屬性的話，會直接上傳，不需要startLoad
- data : 是後端傳回的 alioss 的認證資訊
- file : 上傳檔案
- startLoad ： 開始上傳函數
這裡是上傳時候資料結構。
所有在這裡添加了一個資料處理的函數 upload 進行中轉，就是為了把資料處理為一下格式
data = {
accessid,
policy,
signature,
dir,
file,
}
如果這裡沒有 upload 屬性将不會去特意處理後端傳回的 alioss 資訊。
直接去傳入後端傳回的 alioss 資料資訊進行圖檔上傳
可以能會出現資料結構不正确而報錯。
預覽效果：
xl_alioss_react 的安裝和應用
yarn add xl_alioss_react
import React from 'react';
import FileUpload from 'xl_alioss_react'
export default class Main extends React.Component {
state = {
imgUlr:''
}
render() {
return (
<div style={{padding:30,fontSize:30}}>
<FileUpload
url='http://127.0.0.1:8088/common/upload/alioss/vue'
uploadEnd={(data) => {
this.setState({
imgUlr:data
})
}}
upload={(data, file, load) => {
load(Object.assign({}, data, {file}))
}}
>
上傳
</FileUpload>
<div>
{this.state.imgUlr?
<img src={this.state.imgUlr} alt=""/>:''}
</div>
</div>
)
}
}
這裡的三個屬性和 vue 元件是相同的，是以不做多的解釋。
開發元件需要的知識：
1、阿裡雲 oss 上傳方法
2、vue 和 react 的相關知識
3、阿裡雲 oss 對象存儲
介紹
阿裡雲對象存儲服務（Object Storage Service，簡稱 OSS），是阿裡雲提供的海量、安全、低成本、高可靠的雲存儲服務。
您可以通過調用 API，在任何應用、任何時間、任何地點上傳和下載下傳資料，也可以通過 Web 控制台對資料進行簡單的管理。
OSS 适合存放任意類型的檔案，适合各種網站、開發企業及開發者使用
我們可以把我們的靜态資源存放在上面。
并且 oss 有各種優勢：
友善、快捷的使用方式
強大、靈活的安全機制
豐富、強大的增值服務
具體了解，請求浏覽阿裡雲對象存儲 ：
對象存儲上傳圖檔相關知識介紹
這裡我們引用到的是阿裡雲 oss 的 web 端上傳
關于前端上傳阿裡雲一共提供了四種方法：
web 端直傳 Javascript 用戶端簽名直傳 伺服器簽名後直傳 伺服器簽名直傳設定回調上傳如果想了解更多的知識，可以自己浏覽相關文章。
本文章的元件都是基于 伺服器簽名後直傳 的。
伺服器簽名直傳
原理介紹：
服務端簽名後直傳的邏輯圖如下：
流程如下：
- 使用者發送上傳Policy請求到應用伺服器。
- 應用伺服器傳回上傳Policy和簽名給使用者。
- 使用者使用Plupload直接上傳資料到OSS。
因為我們是大前端，是以後端的我就不解釋了。。
後端的老闆可以看案例，非常齊全
在這裡着重介紹一下後端傳回的 Policy 資訊
傳回的結構：
{
accessid // 阿裡雲配置設定的 Access Key Id
policy // 生産的認證資訊
signature // 計算處理的簽名
} 上面的資料是直傳 oss 所需要的資料
如下：
let curDate = new FormData()
const key = options.dir + new Date().getTime() + '_' + options.file.name
curDate.append("OSSAccessKeyId", options.accessid);
curDate.append("policy", options.policy);
curDate.append("Signature", options.signature);
curDate.append("key", key);
curDate.append("success_action_status", '200');
curDate.append('file', file)
這是直傳的時候需要的資料。
阿裡雲 oss 相關的知識已經介紹完成。。
4、node 作為服務端生産 Policy
預備知識：
1、express 後端基于 node 的應用開發架構
2、node - crypto 用于加密解密子產品
3、阿裡雲加密生産 Policy 的知識 ( 這個沒有找到文檔，我是通過 PHP 案例修改的 )
開發及其詳解
router.get('/alioss/vue', (req, res) => {
let time = new Date(new Date().getTime() + 30000).formatDate('yyyy-MM-ddThh:mm:ssZ')
let policyObj = JSON.stringify({
"expiration": time,
"conditions": [
// 檔案大小
["content-length-range", 0, 1048576000],
["starts-with", "$key", dir]
]
})
let policy = new Buffer(policyObj).toString('base64');
let signature = crypto.createHmac('sha1', 'OEwkBpLfdoHCAbAoWXt5XFe4tiUwhX').update(policy).digest().toString('base64');
res.end(JSON.stringify(
{
accessid: 'LTAIhf0LGhtEKTe8',
host:aliossHost,
dir,
policy,
expire:time,
signature
}
));
})
詳解：
let time = new Date(new Date().getTime() + 30000).formatDate('yyyy-MM-ddThh:mm:ssZ')
生成一個過期時間
這裡是用目前時間加上 30 秒，提供給 Policy 對象
let policyObj = JSON.stringify({
"expiration": time,
"conditions": [
// 檔案大小
["content-length-range", 0, 1048576000],
["starts-with", "$key", dir]
]
})
定義 Policy 對象
expiration : 這個是過期時間
conditions ： 一些規則數組
content-length-range ： 檔案的長度範圍
starts-with ： 隻能上傳某一個目錄，這裡是 dir 目錄
let policy = new Buffer(policyObj).toString('base64');
将 Ploicy 對象轉為 base64 字元串。
let signature = crypto.createHmac('sha1', key ).update(policy).digest().toString('base64');
這裡由 policy 對象的 base64 的字元串 、阿裡雲oss 的 key 通過 crypto 進行 sha 加密，
傳回 base64 的加簽字元串
res.end(JSON.stringify(
{
accessid: id,
host:aliossHost,
dir,
policy,
expire:time,
signature
}
));
accessid ： 阿裡雲提供的 AccessId
host ： 上傳到阿裡雲到位址
dir ：要上傳到目錄
policy ： oss 需要到憑證
expire ： 過期時間
signature ： 加簽到字元串
node 的加密子產品基本完成，這裡可以直接引用。
5、前端代碼開發
這裡隻會介紹 vue 的元件開發。
元件的模版：
介紹：
<slot></slot> : 這裡有一個 slot 插槽，是用來存放自元件的。這樣我們點選該元件包裹的元素都是可以觸發上傳的
input ： 适用于來上傳的 form 表單
js 子產品介紹
uloadImg : 很顯然這裡的這個方法是觸發上傳動作的
doUpload : 這裡是和後端互動，擷取 oss 上傳的憑證
uploadOss ： 這裡是得到 oss 上傳憑證後，上傳到 oss 上面。
大概介紹了下...
具體代碼源碼：
vue/axios實作阿裡雲oss的圖檔上傳元件