element ui表单上传文件

实现提交表单和上传文件同步进行,把表单数据作为upload组件上传附带的额外参数。


    
        
            
            
        
    
    
        
            
            
将文件拖到此处,或点击上传
导入 取消

methods:

//onChange这里我根据我的业务需求进行修改替换上一次的上传文件了
onChange(file, fileList) {//文件状态改变时的钩子函数
    // this.form2.fileList = fileList;
    if (fileList.length > 0) {
        this.form2.fileList = [fileList[fileList.length - 1]]  // 这一步,是 展示最后一次选择的文件
    }
},
onSuccess(response, file, fileList) {//文件上传成功时的钩子
    if(response.state==1){
        this.$message.success('导入成功');
        this.dialogVisible2=false;
    }else{
        this.$message.error('导入失败');
    }
    this.form2.fileList = [];
    this.$refs['form2'].resetFields();
    this.$refs['newupload'].clearFiles();
},
importFilepost(){//导入提交---
    this.$refs.form2.validate((valid) => {
        if (valid) {
            //触发组件的action
            this.$refs.newupload.submit();//主要是这里
        } else {
            console.log('error submit!!');
            return false;
        }
    })
},
onCancel(){//取消
    this.$refs.form2.resetFields();
},

 

你可能感兴趣的:(Vue,ui,vue.js,elementui)