vue + axios + oss的阿裡直傳

擷取伺服器上傳資訊

import axios from 'axios'
import store from '@/store'
export function getAllOss () { // 擷取php服務資料
  return new Promise((resolve, reject) => {
    axios.get('擷取資訊的位址（http://s/getosskey）')
      .then((res) => {
        resolve(res)
      })
      .catch((err) => {
        reject(err)
      })
  })
}
           

設定請求參數

因為是檔案的傳輸 是以要

var request = new FormData()

/**
*@author：[email protected]
*@params:參數
*@file:檔案
*@gObjectName： 檔案名稱
**/
export function doData (params, file, gObjectName) { // 設定請求參數
  console.log(params)
  var request = new FormData()
  // 檔案名字，可設定路徑
  request.append('key', 'user/avatar/' + gObjectName)
  // policy規定了請求的表單域的合法性
  request.append('policy', params.policy)
  // Bucket 擁有者的Access Key Id
  request.append('OSSAccessKeyId', params.accessid)
  // 讓服務端傳回200,不然，預設會傳回204
  request.append('success_action_status', '200')
  // 根據Access Key Secret和policy計算的簽名資訊，OSS驗證該簽名資訊進而驗證該Post請求的合法性
  request.append('callback', params.callback)
  request.append('Signature', params.signature)
  // 需要上傳的檔案filer
  request.append('Filename', 'user/avatar/' + gObjectName)
  request.append('name', gObjectName)
  request.append('file', file, gObjectName)
  return request
}
           

發送請求

import axios from 'axios'
export function doUpLoad (url, data) {
  return new Promise((resolve, reject) => {
    console.log(data)
    axios({
      url: url,
      method: 'post',
      data: data,
      headers: { 'Content-Type': 'multipart/form-data' }
    })
      .then((res) => {
        resolve(res)
      })
      .catch((err) => {
        reject(err)
      })
  })
}
           

3部曲後發送請求即可擷取阿裡OSS傳回的狀态以及背景伺服器傳回的資料。