ElementUI el-upload上传文件

最新推荐文章于 2025-11-11 11:13:15 发布

原创最新推荐文章于 2025-11-11 11:13:15 发布 · 675 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#el-upload上传文件 #vue上传文件 #element上传文件 #vueadmin上传文件

vue精选专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用Element UI的上传组件(el-upload)实现文件上传功能，包括前端组件配置、后端API调用及请求适配。通过具体代码示例，展示了如何自定义上传逻辑、处理多文件上传以及在请求头中设置正确的Content-Type。

在结构中使用 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
}