阿里云的oss真的文檔寫辣雞， 直傳的demo代碼也辣雞， 代碼一坨一坨的。

如果你被oss困住了， 那么你看這篇就完全可以解決問。

一句話可以概括的非要寫一堆， 加密請(qǐng)求

前端直傳的話有現(xiàn)成的例子
https://help.aliyun.com/document_detail/31925.html
但是這個(gè)里面代碼特別不適合移植， 直接寫重點(diǎn)就好了（吐槽： 里面一堆滿足自己場(chǎng)景的代碼）。

然后推薦后臺(tái)簽名， 返回簽名前端就不需要暴露賬戶了， 子賬號(hào)都不需要， 安全程度高， 并且不麻煩。

現(xiàn)在官方有g(shù)o, java, php, python等語言， 咩有nodejs， 那就自己寫， 很簡(jiǎn)單。

主要是生成這兩個(gè)字段。
policy
signature

用js（nodejs）， 不需要任何安裝第三方包。
前端拿到后就可以發(fā)起請(qǐng)求了。

代碼如下：

const crypto = require('crypto')
const config = {
  secret: 'xxxx',
  OSSAccessKeyId: 'xxxx',
  host: 'http://xxx.xxx.vip',
}

exports.OssSing = 
// (params) => new Promise((resolve, reject) => {
  ApiHook((v, resolve, reject) => {
  const dirPath = '/' 
  const {OSSAccessKeyId, host, secret} = config
  let end = new Date().getTime() + 300000
  let expiration = new Date(end).toISOString()
  let policyString = {
    expiration,
    conditions: [
      ["content-length-range", 0, 1048576000],
      // ["starts-with", "$key", dirPath]
    ]
  }
  policyString = JSON.stringify(policyString)
  const policy = new Buffer(policyString).toString('base64')
  const signature = crypto.createHmac('sha1', secret).update(policy).digest('base64')
  let res = {
    OSSAccessKeyId: OSSAccessKeyId,
    host,
    policy,
    signature,
    saveName: end,
    startsWith: dirPath
  }
  resolve(res)

})

上面starts-with被我注釋了， 打開的話需要產(chǎn)生交互，就是前端把key傳過來，然后后臺(tái)再傳回去。

前端的話， 更簡(jiǎn)單了， 拿到簽名直接直傳oss， 不需要消耗服務(wù)器啦。
以axios為請(qǐng)求庫做例子, 代碼參考：

import axios from 'axios'

export default async function(file, cb, errorcb){
    let params = {
        token: Store.getState().Common.userInfo.token
    }
    let ossInfo = await Http.shop['ossSign'](params)()
    {
        // 如果有企業(yè)和店鋪的時(shí)候這里要做區(qū)分，分便統(tǒng)計(jì)
        let key = `commodity/${ossInfo.saveName}`
           /* eslint-disable no-undef */
        let param = new FormData() // 創(chuàng)建form對(duì)象
        param.append('name', file.name) // 通過append向form對(duì)象添加數(shù)據(jù)
        param.append('key', key)
        param.append('policy', ossInfo.policy)
        param.append('OSSAccessKeyId', ossInfo.OSSAccessKeyId)
        param.append('success_action_status', 200)
        param.append('signature', ossInfo.signature)
        param.append('file', file, file.name) // 通過append向form對(duì)象添加數(shù)據(jù)
        // console.log(param.get('file')) // FormData私有類對(duì)象，訪問不到，可以通過get判斷值是否傳進(jìn)去
        let config = {
            headers: {'Content-Type': 'multipart/form-data'}
        }
        // 添加請(qǐng)求頭
        axios.post(ossInfo.host, param, config)
        .then(response => {
            // console.log('上傳成功')
            // console.log(response)
            let url = `${ossInfo.host}/${key}`
            // console.log(url)
            cb(url)
        })
    }
}

--ok--

效果如下

預(yù)覽啥的， 完全自己控制。 sdk里面，還不好改， （前兩年用過， 那封裝的改的很麻煩）

【如果有需要樓上上傳組件的， 我可以考慮開源， 有預(yù)覽， 加載中， 上傳中， 刪除， 個(gè)數(shù)限制】

--其他--

如果出現(xiàn)上傳成功但是圖片無法訪問，基本都是阿里云管理系統(tǒng)配置問題。（比如倉庫的類型不能是歸檔）

--END--