阿里oss上傳圖片react組件alioss-react，vue組件alioss-vue （不用我先收藏着，後端看下前端處理方法）

時間 2020-07-17

標籤阿里 oss 上傳圖片 react 組件 alioss vue 不用收藏後端看下前端處理方法欄目阿里巴巴简体版

原文原文鏈接

一、介紹

　　最近開發了一個項目，其中須要一個上傳圖片到阿里雲的 oss 上面，就是上傳圖片到阿里雲的 oss 上面。javascript

　　由於以前開發過 vue 的阿里雲 oss 上傳，因此直接複製粘 vue 的組件。html

　　由於我作的是 react 的項目，因此須要稍微修改。前端

　　介於之後會常常用到，因此決定將它封裝成組件，而且添加到 npm 包裏面。vue

　　xl_alioss_vue : 這個是 vue 的 NPM 包java

　　xl_alioss_react : 這個是 react 的 NPM 包node

二、項目的安裝和預覽

　　xl_alioss_vue 的安裝和應用react

　　安裝：ios

yarn add xl_alioss_vue

　　使用：web

<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 插件有三個屬性：express

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 組件是相同的，因此不作多的解釋。

　　預覽效果：

　　開發組件須要的知識：

　　一、阿里雲 oss 上傳方法

　　二、vue 和 react 的相關知識

三、阿里雲 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 相關的知識已經介紹完成。。

四、node 做爲服務端生產 Policy

　　預備知識：

　　一、express 後端基於 node 的應用開發框架

　　二、node - crypto 用於加密解密模塊

　　三、阿里雲加密生產 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 ：加簽到字符串　　