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
}