vue 百度雲上傳文件PostObject

 

百度雲上傳文件 API(PostObject)

PostObject接口  ：

接口描述

此接口使用HTML表單上傳文件到指定bucket，用於實現通過瀏覽器上傳文件到bucket。在PutObject操作中通過HTTP請求頭傳遞參數，在PostObject操作中使用消息實體中的表單域傳遞參數，其中消息實體使用多重表單格式（multipart/form-data）編碼。

該接口調用需要用到 base64和sha256加密

1、安裝 js-base64

　　npm install js-base64 --save

　　使用：

　　const Base64 = require('js-base64').Base64

 　 var basePolicy = Base64.encode(str)

2、安裝 crypto-js

 　　npm install crypto-js --save

　　使用

　　const CryptoJS = require('crypto-js')

　　let signature = CryptoJS.HmacSHA256(basePolicy, config.sk).toString()

3、具體代碼如下（接口使用axios訪問，）

// tslint:disabled
<template>
  <div>
    <van-uploader :after-read="upload" :before-read="beforeRead" />
  </div>
</template>

<script>
import Axios from 'axios'
const Base64 = require('js-base64').Base64
const CryptoJS = require('crypto-js')
const config = {
  bcebosBucket: 'xxxx',
  endpoint: 'xxxxxxxx', //Bucket所在區域域名
  ak: 'xxxxx', //您的AccessKey
  sk: 'xxxxx' //您的SecretAccessKey
}

export default {
  methods: {
    data() {
      return {}
    },
    beforeRead(file) {
      debugger
      if (file.type !== 'image/jpeg') {
        Toast('請上傳 jpg 格式圖片')
        return false
      }
      return true
    },
    upload(file, detail) {
      debugger
      /**
       * bos 上傳文件接口網站
       * https://cloud.baidu.com/doc/BOS/s/qjwvyseos#postobject%E6%8E%A5%E5%8F%A3
       */
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      // bos參數組裝 key-文件存儲位置和名稱
      let key =
        config.bcebosBucket + '/' + year + '/' + month + '/' + file.file.name
      // policy 格式見網站 String
      let expiration = {
        expiration: this.formate(date, 'yyyy-MM-ddThh:mm:ssZ'),
        conditions: [{ bucket: config.bcebosBucket }, { key: key }]
      }
      let str = JSON.stringify(expiration)
      var basePolicy = Base64.encode(str)
      let signature = CryptoJS.HmacSHA256(basePolicy, config.sk).toString()

      let formData = new FormData()
      formData.append('key', key)
      formData.append('accessKey', config.ak)
      formData.append('policy', basePolicy)
      formData.append('signature', signature)
      formData.append('file', file.file)
      Axios.post(config.endpoint, formData, {
        baseURL: '',
        headers: { 'content-type': 'multipart/form-data;' }
      }).then(res => {
        debugger
      })
    },
    formate(time, fmt) {
      var o = {
        'M+': time.getMonth() + 1, //月份
        'd+': time.getDate(), //日
        'h+': time.getHours(), //小時
        'm+': time.getMinutes(), //分
        's+': time.getSeconds(), //秒
        'q+': Math.floor((time.getMonth() + 3) / 3), //季度
        S: time.getMilliseconds() //毫秒
      }
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(
          RegExp.$1,
          (time.getFullYear() + '').substr(4 - RegExp.$1.length)
        )
      for (var k in o)
        if (new RegExp('(' + k + ')').test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ('00' + o[k]).substr(('' + o[k]).length)
          )
      return fmt
    }
  }
}
</script>

<style lang="scss" scoped>
</style>