今天来看一下如何在vue+element-ui的项目中成功上传文件给后台服务器
<el-upload
class="upload-demo"
ref="upload" // ref给节点命名
:limit="1" //limit显示上传的数量
accept=".xls, .xlsx" //accept选择接受文件的种类
:before-upload="beforeUpload" //before-upload文件上传成功之前的回调函数可以返回为false可以阻止文件上传
:action="$store.state.baseUrl.api + '/monitor/device/channel/importChannelList'" //后台接收的地址
:file-list="fileList" //上传文件的列表
:on-success="uploadSuccessed" // 成功之后的回调函数
:on-error="uploadFailed" //发生错误的回调函数
:auto-upload="false" //是否自动上传
>
在before-update中我需要进行的操作
beforeUpload(file) {
let formData = new FormData(); //创建一个表单对象，固定格式
formData.append("file", file); //在表单中加入要上传的文件
axios
.post("/monitor/device/channel/importChannelList", formData) //发送请求看是否成功
.then(res => {
if (res.data.code == 200) {
this.$message({
type: "success",
message: "上传成功！"
});
} else {
this.$message.error(res.data.message);
}
})
.catch(err => {
console.log(err);
});
return false; //这儿我默认返回的失败
},
在成功之后on-success中
if (res.code == 200) {
this.$message({
type: "success",
message: "文件上传成功！"
});
// 关闭对话框并清空
this.leadTo = false;
this.fileList = [];
} else {
this.$message.error(res.message);
// 关闭对话框并清空
this.leadTo = false;
this.fileList = [];
}
如果没有设置自动上传我们就需要手动提交
this.$refs.upload.submit() //在对应的点击事件中设置upload是对应节点的名字
