前言
最近在做一个文件上传的功能，后端接口写好了、发现前端上传文件的页面不会写……（刚接触）然后我就找解决方案，后面找发现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(); // 清除上传的文件列表
})
}希望有懂的大佬指点一下。
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>
