ElementUI el-upload上传文件

在结构中使用 el-upload

<el-upload class="avatar-uploader" action="" :http-request="uploadHttp" :show-file-list="false">
   <el-button type="primary" size="small">上传文件</el-button>
</el-upload>

在 script 标签中

import { postFileUpload } from '@/api/upload'
export default {
  name: 'DetailDrawer',
  components: {},
  props: {
  },
  data () {
    return {
    	id:''
    }
  },
  computed: {

  },
  watch: {
  },
  created () {
  },
  mounted () {
  },
  methods: {
    fileUpload (file) {
      postFileUpload({ projectId: this.id, file }).then((res) => {
        this.$message.success(`上传文件成功`)
      })
    },
    uploadHttp (content) {
      this.fileUpload(content.file)
    }
}

在 ‘@/api/upload’ 中

import request from '@/utils/request'
export function postFileUpload (data) {
  return request({
    url: '/file/upload',
    method: 'post',
    data,
    headers: { 'Content-Type': 'multipart/form-data' }
  })
}

在request中

在请求拦截的那里加一个 if 判断

if (config.headers['Content-Type'] === 'multipart/form-data') {
  let formData = new FormData()
  for (let item in config.data) {
     if (item === 'files') {  //多文件上传时的字段名为files
       for (var i = 0; i < config.data.files.length; i++) {
         formData.append(item, config.data.files[i])
      }
      } else {
          formData.append(item, config.data[item])
      }
   }
   config.data = formData
}