Requirement background: Click the input box to select the compressed package file to be uploaded, and the input box will display the selected file name after the calculation
<el-upload
ref="uploadFile2"
action="string"
:limit="1"
accept=".zip"
:on-change="handleChange"
:auto-upload="false"
:file-list="fileList"
:show-file-list="false"
>
<el-input v-model="ruleForm.agentFile"></el-input>
</el-upload>
The purpose of binding the on-change method here is to take the variable to receive the file uploaded by the front end and the file name to be displayed;
// 上传的文件发生变化时
handleChange(file, fileLists) {
this.ruleForm.agentFile = file.name;
fileObj = file.raw;
console.log(file);
// 这里把数组置空是为了每次只能上传一个文件,以防报错
this.fileList = [];
},
Next comes the form submission
// 表单提交
submitForm() {
// 验证表单是否填写完整且正确
this.$refs["ruleForm"].validate(valid => {
if (valid) {
let formData = new FormData();
// 把新增时后端要求的参数都添加进来
formData.append("agentName", this.ruleForm.agentName);
formData.append("agentRole", this.ruleForm.agentRole);
formData.append("agentType", this.ruleForm.agentType);
formData.append("description", this.ruleForm.description);
formData.append("unit", this.ruleForm.unit);
formData.append("agentFile", fileObj);
// 这里使用formData类型是因为要传给后端文件
addAgent(formData).then(data => {
if (data.code == 200) {
this.$modal.msgSuccess(data.msg);
this.dialogVisible = false;
this.$emit("refreshList");
// 把表单信息清空,保证下次打开的时候是全新空白的
this.reset();
// 把表单校验信息清空
this.$refs["ruleForm"].clearValidate();
} else {
this.$modal.msgError(data.msg);
}
});
}
});
}
Previously, uploading files requires a separate interface, so adding and uploading files only requires one interface, and I learned it again~