elementui-admin中阿里云oss后端签名直传

首先在utils文件夹中新建一个upload.js文件
写入如下代码：

import { vUploadImage } from '@/api/common'
import axios from 'axios'
import { Message } from 'element-ui'

export function fileUpload(file) { // file是文件
  return new Promise((resolve, reject) => {
    // 请求后端签名
    vUploadImage().then(res => {
      let data = res.data
      let suffix = file.name.split('.')[file.name.split('.').length - 1] // 获取文件后缀
      let formData = new FormData()
      formData.append('key', data.dir + data.fileName + '.' + suffix) // 文件名
      formData.append('policy', data.policy) // 后台获取超时时间
      formData.append('OSSAccessKeyId', data.accessId) // 后台获取临时ID
      formData.append('success_action_status', '200') // 让服务端返回200,不然，默认会返回204
      formData.append('signature', data.signature) // 后台获取签名
      formData.append('file', file)
      axios.post(data.host, formData, {
        'Content-Type': 'multipart/form-data'
      }).then(res => {
        console.log(res)
        if (res.status == '200') {
          Message({
            message: '上传成功',
            type: 'success'
          })
          resolve(data.host + '/' + data.dir + data.fileName + '.' + suffix)
        } else {
          Message({
            message: res.message || 'Error',
            type: 'error'
          })
          reject(false)
        }
      })
    })
  })
}

在需要使用的页面中进行引用

import { fileUpload } from '@/utils/upload'

添加上传组件，其中uploadFun为自定义的上传方法

<el-upload
  class="upload-demo"
  :http-request="uploadFun"
  action
  multiple
  :show-file-list="false"
  :limit="1"
>
  <el-button class="defaultBtn2 iconfont icon-fujian1">上传附件</el-button>
</el-upload>

uploadFun方法中：

uploadFun: function(e) {
  fileUpload(e.file).then(res => {
    console.log('res', res)
  })
}