實(shí)現(xiàn)提交表單和上傳文件同步進(jìn)行，把表單數(shù)據(jù)作為upload組件上傳附帶的額外參數(shù)。

<el-form :inline="false" ref="form2" :rules="rules2" :model="form2" label-width="100px" style="padding: 30px 0;">
    <el-form-item label="導(dǎo)入方式" prop="importType">
        <el-select v-model="form2.importType" placeholder="請(qǐng)選擇導(dǎo)入方式">
            <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>點(diǎn)擊上傳</em></div>
        </el-upload>
    </el-form-item>
    <el-form-item label="">
        <el-button type="primary" @click="importFilepost">導(dǎo)入</el-button>
        <el-button type="primary" @click="onCancel">取消</el-button>
    </el-form-item>
</el-form>

methods:

//onChange這里我根據(jù)我的業(yè)務(wù)需求進(jìn)行修改替換上一次的上傳文件了
onChange(file, fileList) {//文件狀態(tài)改變時(shí)的鉤子函數(shù)
    // this.form2.fileList = fileList;
    if (fileList.length > 0) {
        this.form2.fileList = [fileList[fileList.length - 1]]  // 這一步，是 展示最后一次選擇的文件
    }
},
onSuccess(response, file, fileList) {//文件上傳成功時(shí)的鉤子
    if(response.state==1){
        this.$message.success('導(dǎo)入成功');
        this.dialogVisible2=false;
    }else{
        this.$message.error('導(dǎo)入失敗');
    }
    this.form2.fileList = [];
    this.$refs['form2'].resetFields();
    this.$refs['newupload'].clearFiles();
},
importFilepost(){//導(dǎo)入提交---
    this.$refs.form2.validate((valid) => {
        if (valid) {
            //觸發(fā)組件的action
            this.$refs.newupload.submit();//主要是這里
        } else {
            console.log('error submit!!');
            return false;
        }
    })
},
onCancel(){//取消
    this.$refs.form2.resetFields();
},

?文章來源地址http://www.zghlxwxcb.cn/news/detail-597999.html

到了這里，關(guān)于element ui表單上傳文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！