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 端上傳
關於前端上傳阿里雲一共提供了四種方法：
如果想了解更多的知識，可以自己瀏覽相關文章。
本文章的組件都是基於 服務器簽名后直傳 的。
服務器簽名直傳
原理介紹：
服務端簽名后直傳的邏輯圖如下：
流程如下：
-
用戶發送上傳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的圖片上傳組件
小結巴巴博客園 https://www.cnblogs.com/jiebba/p/9597995.html
XiaoLong's Blog