前端挪用上傳oss步驟

1、獵取accessKeyId,accessKeySecret,stsToken,bucket 平常背景定義(所以我們須要要求接口)
2、初始化oss實例
3、挪用上傳要領
4、獲得返回效果

第一步 封裝一個要求接口的函數 fetchProxy.js

import 'whatwg-fetch'
const cfg = {
    headers: {
      'Content-Type': 'application/json',
      'X-AUTH-TOKEN': token,
    },
    method: 'POST',
    body: JSON.stringify(body)
}
export default async (url, body, config = {}) => {
  const res = await fetch(url, {...cfg, ...config})
  return res.json()
}

第二步對oss的簡樸封裝 oss.js

import OSS from 'ali-oss'
import fetchProxy from './fetchProxy.js'
let baseUrl = 'http://mapi.yimifudao.com'

// 獵取oss初始化須要的相干信息
function getOssConfigInfo (url, config) {
  return fetchProxy(`${baseUrl}${url}`, config)
}

// 初始化oss
async function initOSSClient (config) {
  //獵取初始化須要的設置
  let res = await getOssConfigInfo('/getFileKey', config)
  if (res.res !== 'SUCCESS') return false
  let {bucket, path, accessKeyId, accessKeySecret, stsToken} = res.data
  // ossClient oss設置  path上傳文件存儲的途徑
  return {
    ossClient: new OSS.Wrapper({
      region: 'oss-cn-hangzhou',
      accessKeyId,
      accessKeySecret,
      stsToken,
      bucket
    }),
    path
  }
}

// 讀取文件
function readFile (option) {
  return new Promise((resolve, reject) => {
    try {
      let file = new FileReader()
      file.addEventListener('load', e => {
        resolve(e.target.result)
      })
      //option.file input file 文本框讀取到的文件對象
      file.readAsArrayBuffer(option.file)
    } catch (e) {
      reject()
    }
  })
}

// oss上傳文件
//option 上傳過程當中的回調參數  
//config 獵取oss設置信息須要的參數
export default async (option = {}, config) => {
  const fileResult = await readFile(option)
  if (!fileResult) return option.onError ? option.onError('讀取文件失利') : '讀取文件失利'

  let {ossClient, path} = await initOSSClient(config)
  if (!ossClient) return option.onError ? option.onError('oss初始化毛病') : 'oss初始化毛病'
  //格式化文件名
  let ossObj = `${path}.${option.file.name.split('.').reverse()[0]}`
  try {
    //挪用 oss實例put體式格局上傳文件
    const result = await ossClient.put(ossObj, OSS.Buffer(fileResult))
    return option.onSuccess ? option.onSuccess(result) : result
  } catch (e) {
    return option.onError ? option.onError('上傳失利') : {res: 'FAIL'}
  }
}

// 獵取暫時接見途徑
export async function getSignatureUrl (urlKey, config) {
  let {ossClient} = await initOSSClient(config)
  if (!ossClient) return
  return ossClient.signatureUrl(urlKey)
}

第三步 頁面挪用

    <input type='file' id='fileupload/>

import oss, {getSignatureUrl} from './oss.js'
let onError = (err) => {
    console.log(err)
}
let onSuccess = (res) => {
    console.log(res)
}
let fileUpload = document.getElementById('fileupload')
fileUpload.addeventlistener('onchange', (e) => {
    oss({
        file: e.result.files[0]
        onSuccess,
        onError
    }, {})
})