通过校验,再上传
<el-form ref="form" :model="data" :rules="formIndustryules" >
<el-form-item label="name" prop="name">
<el-input v-model="data.name"></el-input>
</el-form-item>
<el-form-item class="form-button-center">
<!-- disabled 在下方用来阻止弹框弹出 -->
<el-upload
class="uploadButton"
:disabled="disabled"
ref="uploadref"
:action="actionUrl.importUrl"
:on-error="handleError"
:on-success="handleUpload"
:before-upload="beforeUpload"
:show-file-list="false"
:data="formIndustrydata"
:headers="{ Authorization: token }"
:with-credentials="true"
>
<el-button type="primary" @click="handelUploadClick">去导入</el-button>
</el-upload>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
data: {
},
formIndustryules: {
name: [{ required: true, message: '不能为空', trigger: 'blur' }],
},
// 上传路径
actionUrl: {
importUrl: `/file/upload`,
exportUrl: '',
},
disabled: false,
};
},
methods: {
handelUploadClick() {//------校验
this.$refs.formIndustrydata.validate(async valid => {
if (valid) {
console.log('成功');
} else {
//失败就阻止文件选择框弹出,disabled 绑定到el-upload上
this.disabled = true;
setTimeout(() => {
this.disabled = false;
}, 0);
return false;
}
});
},
beforeUpload(file) {
const FILE_NAME = file.name;
if (FILE_NAME.substring(FILE_NAME.lastIndexOf('.')) !== '.xls' && FILE_NAME.substring(FILE_NAME.lastIndexOf('.')) !== '.xlsx') {
this.$message.warning({ message: '仅支持.xls和.xlsx文件' });
return false;
}
this.paramformloading = true;
},
handleError(error, file) {
console.log(456, error, file);
this.$message.error({ message: '文件格式错误,请联系管理员' });
},
handleUpload(response) {
console.log(response);
if (response.code != 200) {
this.$message.error({ message: response.message });
} else {
this.$message.success({ message: '导入成功' });
this.getSkuparam();
}
},
},
};
</script>
},
};
</script>