1、HTML

<template>
  <div>
    <el-upload
      :disabled="saveLoading"
      action="upload"
      :show-file-list="false"
      :http-request="selfUpload"
      :before-upload="beforeAvatarUpload"
      accept=".wav"
    >
      <el-button
        :disabled="saveLoading"
        :loading="saveLoading"
        type="primary"
      >上传文件</el-button>
    </el-upload>
  </div>
</template>

2、JS

<script>
import {
  uploadFile
} from '@/api/upload'

export default {
  // 属性
  props: {
    configId: {
      type: Number,
      default: null
    }
  },
  // 数据
  data() {
    return {
      saveLoading: false // 保存按钮loading效果
    }
  },
  // 方法
  methods: {
    // 上传语音文件并保存
    uploadFile(params) {
      this.saveLoading = true
      uploadFile(params)
        .then(res => {
          if (res.data.result.code === '200') {
            this.$message.success(res.data.result.message)
            this.$emit('update')
          } else {
            this.$message.error(res.data.result.message)
          }
          this.saveLoading = false
        })
        .catch(err => {
          this.saveLoading = false
          console.log('报错', err)
        })
    },
    /** **************************图片上传---start---*********************************************** */
    // 自定义上传行为，使用接口上传
    selfUpload(param) {
      console.log('imgcontent', param)
      console.log('file', param.file)
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('neighNo', localStorage.getItem('neighNo'))
      formData.append('configId', this.configId)
      this.uploadFile(formData)
    },

    beforeAvatarUpload(file) {
      console.log('file', file)
      const isMP4 = file.type === 'audio/wav'
      const isLt10M = file.size / 1024 / 1024 < 1
      if (!isMP4) {
        this.$message.error('上传视频只支持WAV，请确认后重新上传')
      }
      if (!isLt10M) {
        this.$message.error('视频大于1M,请确认后重新上传')
      }
      return isMP4 && isLt10M
    }
    /** **************************图片上传---end---*********************************************** */
  }
}
</script>

3、Request接口请求使用默认的FormData

// 请求拦截器
  service.interceptors.request.use(
    config => {
      const header = {
        appName: 'app',
        dateTime: new Date().getTime(),
        user: 'admin',
        language: 'ZH_CN',
        serviceName: 'getInfo',
        versionId: 'v0.1.1',
        token: store.getters.token,
        refreshToken: '111b5988d40a3a9698661ad5e3df11fb'
      }
      const cData = config.data
      const isObj = Object.prototype.toString.call(cData) === '[object Object]'
      const isFormData = Object.prototype.toString.call(cData) === '[object FormData]'
      const isArr = Object.prototype.toString.call(cData) === '[object Array]'
      if (isObj && !isArr) {
        config.data = {
          header: header,
          body: {
            ...cData
          }
        }
      } else if (isFormData) {
        // 不用操作,FormData原封不动的数据
      } else {
        config.data = {
          header: header,
          body: cData
        }
      }
      // 全局等待加载
      // Do something before request is sent
      if (store.getters.token) {
        // 让每个请求携带token-- ['Authorization']为自定义key 请根据实际情况自行修改
        config.headers['Authorization'] = 'Bearer ' + store.getters.token // Bearer是后端要求带的
        // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
        // config.headers['X-Token'] = getToken()
      }
      return config
    },
    error => {
      // Do something with request error
      console.log('请求拦截request.js报错', error) // for debug
      Promise.reject(error)
    }
  )