element ui表单上传文件-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui表单上传文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

<el-form :inline="false" ref="form2" :rules="rules2" :model="form2" label-width="100px" style="padding: 30px 0;">
    <el-form-item label="导入方式" prop="importType">
        <el-select v-model="form2.importType" placeholder="请选择导入方式">
            <el-option
            v-for="item in importTypeData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            >
            </el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="选取文件" prop="fileList">
        <el-upload 
            class="upload-demo" 
            drag 
            ref="newupload" 
            :action="action"
            accept=".xls,.xlsx"
            :on-change="onChange" :on-success="onSuccess" :file-list="form2.fileList"
            :auto-upload="false" 
            :data="form2" 
            >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
    </el-form-item>
    <el-form-item label="">
        <el-button type="primary" @click="importFilepost">导入</el-button>
        <el-button type="primary" @click="onCancel">取消</el-button>
    </el-form-item>
</el-form>

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();
},

文章来源地址https://www.toymoban.com/news/detail-597999.html

到了这里，关于element ui表单上传文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！