HTML
<el-upload drag
:auto-upload="false"
:file-list="fileList"
:before-remove="beforeRemove"
:on-change="handleChange"
action="#"
class="upload-demo"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
JS
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
handleChange(file, fileList) {
this.fileList = fileList;
},
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
const _this = this;
if (_this.fileList.length == 0) {
_this.$message.error("请上传文件！");
return;
}
var formData = new FormData();
for (let i = 0; i < _this.fileList.length ; i++) {
formData.append('file', _this.fileList[i].raw);
}
$.ajax({
url: '后端url',
type: 'post',
contentType: false,
processData: false,
data: formData,
dataType:"json",
success: function (result) {
if (result.Data == 1) {
_this.$refs[formName].resetFields();
_this.fileList = [];
_this.$message({
showClose: true,
message: '已提交，工作人员会在1-5个工作日为您解答，请耐心等待。',
type: 'success'
});
}
else {
_this.$message.error(result.Message);
}
}
});
} else {
return false;
}
});
}
效果截图
标签：false,formData,fileList,element,ajax,ui,file,message,上传 From： https://www.cnblogs.com/zspwf/p/16810744.html