el-upload 上传-------表单校验成功后再触发上按钮

鱼空

已于 2023-11-06 14:55:57 修改

阅读量457

点赞数

文章标签： vue.js javascript 前端

于 2023-10-11 16:57:09 首次发布

本文链接：https://blog.csdn.net/m0_69502730/article/details/133773870

版权

通过校验，再上传


<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>