el-upload不立即上传文件
程序员文章站
2022-08-12 11:11:08
1、点击长传文件按钮,上传后将文件保存到FormData中
<el-upload
ref="upload"
:auto-upload="false"
:action="uploadUrl"
:file-list="fileList"
:on-change="handelOnChange"
:on-remove="handelRemove"
accept=".xls,.xlsx"
>
<el-button type="info">上传文件</el-button>
</el-upload>
data() {
return {
fileList: [],
uploadUrl: "",
}
},
methods:{
handelOnChange(file, fileList) {
this.fileList = [file];
let fd = new FormData();
fd.append("file", file.raw);
this.fd = fd;
},
handelRemove(response, file, fileList) {
this.fd = null;
},
},
2、点击确定将this.fd.file的文件作为参数请求接口
<MORButton style="margin-left: 20px" @click="submit">确定</MORButton>
submit() {
let Formdt = new FormData();
Formdt.append("multipartFile", this.fd.get("file"));
axios
.post("url", Formdt, {
headers: { "Content-Type": "multipart/form-data" },
})
.then((res) => {
if (res.data.code == 0) {
this.$message.success("保存成功");
} else {
this.$alert(res.data.msg, "提示", {
confirmButtonText: "确定",
});
}
})
.catch((err) => {});
},
本文地址:https://blog.csdn.net/weixin_45950826/article/details/112578321