- 最近项目中用到了一个上传功能，在前后端进行联调的时候一直报400，经过查阅文档，参考各个博主精品文章，问题最终解决，并写下此文章做记录，方便下次使用，如需用到可根据项目需求修改接口及http-request方法即可
要做的事：在http-request方法中使用自定义接口传参，上传文件
-
先来一段代码，然后分析一下Upload各个属性的作用
<el-upload
class="upload-excel"
ref="upload"
action="string"
accept=".xlsx,.xls"
:limit="1"
:http-request="httpRequest"
:file-list="fileList"
:before-upload="beforeExcelUpload"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
action 必选参数，上传的地址，如果我们使用http-request，action可以传入字符串，人家说了必选，不能空着，此时action无作用
accept 接受上传的文件类型
limit 最大允许上传个数
file-list 上传的文件列表，我们绑定的fileList需要在data中声明
http-request 覆盖默认的上传行为，可以自定义上传的实现
before-upload 传文件之前的钩子，参数为上传的文件，若返回 false则停止上传。我们可以在这里对文件上传格式及大小做出限制
-
下面是我们最需要的一些方法
<script>
// 引入接口，在下方我会给出接口定义方式
import { uploadExcel } from "@/api/upload";
export default {
name: "upload",
data() {
return {
fileList: []
};
},
methods: {
// 上传文件之前的钩子,上传前对文件的大小和类型进行判断
beforeExcelUpload(file) {
// 打印file，帮助我们了解我们需要的参数
console.log(file);
const isExcel = file.name.split(".")[1] === "xlsx" || file.name.split(".")[1] === "xls";
const isSize = file.size / 1024 / 1024 < 1;
if (!isExcel) {
this.$message({
message: "只能上传xls或xlsx文件!",
type: "error"
});
}
if (!isSize) {
this.$message({
message: "上传文件大小不能超过 1MB!",
type: "error"
});
}
return isExcel && isSize;
},
// 覆盖默认上传行为
httpRequest(params) {
let fd = new FormData();
fd.append("file", params.file);
fd.append("FileName", params.file.name);
fd.append("user", "张三");
// query是放在params中接收的参数，fd是放在了body中接收
uploadExcel(query, fd)
.then(res => {
if (res.resule == 1) {
alert("上传成功");
}
})
.catch(err => {
alert("上传失败，请重新上传");
});
}
}
// uploadExcel接口,我这里使用了两种方式传参，最后记得加上请求头
// export function uploadExcel(query,data) {
// return request({
// url: '/api/users',
// method: 'post',
// headers: { "Content-Type": "multipart/form-data" },
// params: query,
// data
// })
// }
};
</script>
最后
- 如果遇到什么问题就留言吧，能解决大家一起解决一下
- 要您觉得有用，就点赞收藏鼓励一下把
- 文章是自己手敲，是对工作日常的总结，如有错误之处，敬请指正
