阿里OSS上傳文件案例(前端篇)

前端調用上傳oss步驟

一、獲取accessKeyId,accessKeySecret,stsToken,bucket 通常後臺定義(因此咱們須要請求接口)
二、初始化oss實例
三、調用上傳方法
四、獲得返回結果

第一步 封裝一個請求接口的函數 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
    }, {})
})