一、点击上传，使用默认的action上传，添加校验，上传成功后，去除校验：
<el-form-item label="文件md5" prop="fileMd5">
<el-upload
v-if="!form.fileMd5"
v-model="form.fileMd5"
class="upload-demo"
:action="uploadUrl"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-remove="beforeRemove"
accept=".apk"
:limit="1"
:headers="headers"
:on-exceed="handleExceed"
:file-list="fileList"
>
<el-button size="small" type="primary" icon="el-icon-upload"
>点击上传</el-button
>
<div slot="tip" class="el-upload__tip">只能上传apk文件</div>
</el-upload>
<span v-if="form.fileMd5">{{ form.fileMd5 }}</span>
</el-form-item>js：
data() {
return {
// 表单参数
form: {},
// 表单校验
rules: {
taskName: [
{ required: true, message: "请输入任务名称", trigger: "blur" },
// { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
fileMd5: [
{ required: true, message: "请上传APK文件", trigger: "blur" },
],
type: [
{
type: "array",
required: true,
message: "请至少选择一个分析类型",
trigger: "change",
},
],
},
headers: {
Authorization: "Bearer " + getToken(),
},
uploadUrl:
process.env.VUE_APP_BASE_API + `${config.service}/main/apkImport`,
fileList: [],
fileData: null,
};
}, methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
this.form.fileMd5 = "";
this.validateField("fileMd5");
},
handlePreview(file) {
console.log(file);
},
// 文件个数超出
handleExceed(files, fileList) {
this.$message.warning(`上传文件数量不能超过1个!`);
},
beforeRemove(file, fileList) {
this.form.fileMd5 = "";
return this.$confirm(`确定移除 ${file.name}？`);
},
handleSuccess(response, file, fileList) {
console.log("上传成功信息", response, file, fileList);
// const { fileName = "", url = "" } = response.data;
// this.fileList.push({ name: file.name, url });
this.$message.success("上传成功！");
this.handleInputClear("fileMd5");
this.fileData = JSON.parse(response.data);
this.form.fileMd5 = JSON.parse(response.data).fileMd5;
},
handleInputClear(val) {
this.$refs.form.clearValidate(val);
},
validateField(val) {
this.$refs.form.validateField(val);
},
},二、拖拽上传，和表单一起通过formData提交，添加校验，上传成功后，去除校验：
<el-form-item label="文件上传" prop="file">
<el-upload
class="upload-demo"
v-model="form.file"
drag
action="#"
accept=".xls,.xlsx"
:auto-upload="false"
:limit="1"
:before-remove="beforeRemove"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:on-success="handleSuccess"
:on-change="handleChange"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或<em>点击上传</em>
</div>
<!-- <div class="el-upload__tip" slot="tip">只能上传.xlsx文件</div> -->
</el-upload>
</el-form-item>js：
data() {
return {
// 表单参数
form: {},
rules: {
taskName: [
{ required: true, message: "请输入任务名称", trigger: "blur" },
],
categoryId: [
{ required: true, message: "请选择分类", trigger: "change" },
],
monitoringDeadline: [
{
required: true,
message: "请选择日期时间",
trigger: "change",
},
],
file: [{ required: true, message: "请上传Excel文件", trigger: "blur" }],
},
};
},
methods: {
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
handleRemove(file, fileList) {
this.form.file = "";
this.$refs.form.validateField("file");
},
// 文件个数超出
handleExceed(file, fileList) {
this.$message.warning(`上传文件数量不能超过1个!`);
},
handleSuccess(response, file, fileList) {
console.log("上传成功信息", response, file, fileList);
this.$message.success("上传成功！");
this.$refs.form.clearValidate("file");
},
handleChange(file) {
// console.log(file, 3333);
this.form.file = file.raw;
this.$message.success("上传成功！");
this.$refs.form.clearValidate("file");
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
let obj = this.form;
let formData = new FormData();
for (const key in obj) {
formData.append([key], obj[key]);
}
addMain(formData).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
});
},
},
