自定义el-upload 上传文件

一名爱学习的ikun

已于 2024-07-04 16:26:19 修改

阅读量3.6k

点赞数 29

CC 4.0 BY-SA版权

文章标签： vue.js elementui

于 2024-02-25 23:00:09 首次发布

本文链接：https://blog.youkuaiyun.com/ZYXKN/article/details/136288372

本文讲述了作者在使用ElementPlus的el-upload组件时，如何实现文件分步选择和上传的过程，包括关闭自动上传、自定义http-request函数以及处理axios的Content-Type设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

最近在做一个文件上传的功能，后端接口写好了、发现前端上传文件的页面不会写……（刚接触）然后我就找解决方案，后面找发现Element有个组件是<el-upload/>能直接上传文件。

我就想直接用拿来改成自己想要的，花了很多时间去都改不好。网上找的好多教程都是有一定基础的人看的，不适合我这种小白。我照着他们的改是一点都改不出来效果。后面我终于摸索出来了，想着这么麻烦肯定要水一篇博客才行。

需求

我先讲一下我的需求，你们需求不一样的可以不用看了，免得浪费时间。

一个组件能上传文件，一个按钮选中文件，一个按钮提交。不是自动提交。如下图：

实现代码

这是官方的api可以去看详细解释，但是太简洁了我基础比较差不太能看懂。下面是我摸索出来的结论，大家可以看一下不对的可以提出进行改正。

Upload 上传 | Element Plus

默认的el-upload 有个参数action填的是你上传的后端地址，你想自定义上传函数的话你要用http-request是覆盖它，这样就能自定义函数了。但是actio还不能省你得空着在那。

auto-upload是关闭自动上传的，你要实现一个按钮上传一个按钮提交就得关闭这个！

然后去写handleUpload函数。

el-upload ref="upload" :show-file-list="true"
      :auto-upload="false"
      :http-request="handleUpload" 
      action=" "
      :limit="1">
      <el-button type="primary">选择文件</el-button>
      <template #tip>
        <div class="el-upload__tip">
          只能上传xlsx文件
        </div>
      </template>
    </el-upload>
    <el-button type="primary" style="margin-left: 50px;" @click='handleAction'>批量导入</el-button>

handleUpload函数就是绑定在el-upload上的http-request属性，这个名字可以你随便取，大概解释一下就是http-request他会给你一个参数，那个参数就是你选中的那个文件的参数。下面的data.file就是那个文件的具体参数。你们可以console.log去看看它是一个对象来着的，然后创建一个FormData，将那个file赋值给formData（我不太懂这是什么意思）我是在这看到这样赋值的我照着做就能成功了。

在下面就是一些axios请求后端接口了，url换成你们的就行，后面接的就是包含上传文件信息的formData了，最重要的是你请求的控制头一定要是 'Content-Type': 'multipart/form-data' 不然是传不了文件的，后端接口会报file null的错误。

 handleUpload(data) {
            console.log(data)
            const file = data.file;
            console.log(file)
            const formData = new FormData();
            formData.append('file', file);

            axios.post('http://localhost:9090/user/excelUpload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(res => {
                console.log(res)
                if (res.data.code === '200') {
                    this.$message({
                        type: "success",
                        message: "批量导入成功"
                    })
                } else {
                    this.$message({
                        type: "error",
                        message: res.data.msg
                    })
                }
                this.$refs.upload.clearFiles(); // 清除上传的文件列表
            })
        }

说到我就很迷惑我自己用了axios封装了一个request里面定义了请求头，是json的。后面我在使用的vue文件去import使用的时候，需要覆盖它这个请求头，换成 'Content-Type': 'multipart/form-data' 嘛，它竟然是不生效的！请求还是全局设置里面的json，害得我找半天都找不到原因，一直怀疑是现在的代码是有问题的。希望有懂的大佬指点一下。

request.interceptors.request.use(config => {
    // 设置请求头
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

    return config
}, error => {
    // 请求失败，返回错误信息
    return Promise.reject(error)
})

完整的代码

<template>
  <div style="margin: 30px; display: flex; justify-content: center;">
    <el-upload ref="upload" :show-file-list="true" :auto-upload="false" 
    :http-request="handleUpload" action=" "
      :limit="1">
      <el-button type="primary">选择文件</el-button>
      <template #tip>
        <div class="el-upload__tip">
          只能上传xlsx文件
        </div>
      </template>
    </el-upload>
    <el-button type="primary" style="margin-left: 50px;" @click='handleAction'>批量导入</el-button>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  methods: {
    handleAction() {
      this.$refs.upload.submit();
    },
    // 自定义上传方法
    handleUpload(data) {
      console.log(data)
      const file = data.file;
      console.log(file)
      const formData = new FormData();
      formData.append('file', file);

      axios.post('http://localhost:9090/user/excelUpload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        console.log(res)
        if (res.data.code === '200') {
          this.$message({
            type: "success",
            message: "批量导入成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.data.msg
          })
        }
        this.$refs.upload.clearFiles(); // 清除上传的文件列表
      })
    }
  }
}
</script>