jsm-mall-front/src/utils/upload-file.js

// fileUpload.js
import { v4 as uuidv4 } from 'uuid'
import axios from 'axios'
import { getOssConfig } from '@/api/common'
import { getToken } from '@/utils/auth'

/**
 * @description: 文件附件上传
 * file： 文件raw对象
 * successCallback： 成功的回调函数
 * errCallBack： 错误的回调函数
 * progressCallback： 上传进度的回调函数
 * dir: 上传阿里云目标文件夹 eg:图片image，视频video等
 */
const upload = async function (
  file,
  successCallback = new Function(),
  errCallBack = new Function(),
  progressCallback = new Function(),
  dir = 'image'
) {
  let fileName = file.name

  // 拿到签名信息后，组装表单数据，作参考，具体的字段找后台要
  let obj = ((await getOssConfig()) || {}).data
  let config = {}
  config.host = obj['host']
  config.OSSAccessKeyId = obj['OSSAccessKeyId']
  config.policyBase64 = obj['policy']
  config.signature = obj['signature']
  config.expire = parseInt(obj['expire'])
  config.dir = obj['dir']
  let fd = new FormData(),
    uuid = uuidv4(),
    key = `${config.dir}${uuid}${fileName}`
  fd.append('key', key)
  fd.append('success_action_status', '200')
  fd.append('OSSAccessKeyId', config.OSSAccessKeyId)
  fd.append('policy', config.policyBase64)
  fd.append('signature', config.signature)
  fd.append('success_action_status', '200')
  fd.append('file', file)
  console.log(config)
  if (config.host.indexOf('http:') > -1) {
    var protocol = window.location.protocol || 'http:'
    var subUrl = config.host.substring(5, config.host.length)
    config.host = protocol + subUrl
  }
  // 数据组装完成后，发送上传请求到阿里云oss
  axios({
    url: config.host,
    method: 'POST',
    data: fd,
    processData: false,
    cache: false,
    contentType: false,
    headers: {
      'x-token': getToken() // 请求头
    },
    // 这里，我们可以做上传经度
    onUploadProgress: function (progressEvent) {
      if (progressEvent.lengthComputable) {
        let percent = (progressEvent.loaded / progressEvent.total) * 100 || 0
        progressCallback({
          percent: percent
        })
      }
    }
  })
    .then(() => {
      // 拿到结果后，做其他操作
      let size =
        file.size > 1000000
          ? parseFloat(file.size / 1000000).toFixed(2) + 'M'
          : parseFloat(file.size / 1000).toFixed(2) + 'KB'
      successCallback({
        attachment: fileName,
        aliyunAddress: key,
        size: size,
        host: config.host
      })
    })
    .catch(err => {
      errCallBack(err)
    })
}
export default upload