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

前端调用上传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
    }, {})
})