ElementUI 上传组件upload,上传文件时自定义参数

我们常常会遇到这样的需求,就是有个表单,我们需要先填写一些表单数据,然后选择上传的文件,然后再提交给后端处理。

  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" >
    <el-form-item label="类型">
        {{orgRow.name}}
    </el-form-item>
    <el-form-item label="商户名">
        {{orgRow.contactName}}
    </el-form-item>
    <el-form-item label="电话">
        {{orgRow.contactPhone}}
    </el-form-item>
    <el-form-item label="API秘钥" prop="mchKey">
        <el-input type="text" v-model="ruleForm.mchKey"></el-input>
    </el-form-item>
    <el-form-item label="微信支付商号" prop="mchId">
        <el-input type="text" v-model="ruleForm.mchId"></el-input>
    </el-form-item>
    <el-form-item label="API证书" prop="keyFile">
        <el-upload
            class="upload-demo"
            :action="$config.uploadFileUrl.dev"
            :headers="headers"
            :on-preview="handlePreview"
            :on-success="handleSuccess"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :auto-upload="false"
            :file-list="fileList">
            <el-button  slot="trigger" size="small" type="primary">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传证书文件,且不超过500kb</div>
        </el-upload>
    </el-form-item>
    <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">确认修改</el-button>
    </el-form-item>
</el-form>

//提交表单
submitForm(formName) {
    this.$refs[formName].validate((valid) => {
        if (valid) {
            this.orgEdit()
        } else {
            console.log('error submit!!');
            return false;
        }
    });
},
/**
 * 修改信息
 * organizationId  :orgid
 * mchId   :商户id
 * mchKey  :商户秘钥
 * keyFile  :商户证书
 * */
orgEdit(){
    let formDate = new  FormData();
    formDate.append('organizationId',this.orgRow.id);
    formDate.append('mchId',this.ruleForm.mchId);
    formDate.append('mchKey',this.ruleForm.mchKey);
    formDate.append('keyFile',new Blob([JSON.parse(this.ruleForm.keyFile)],{type:'application/json'}) );
    this.$http.homeApi.fetchAdminModifyOrg(formDate).then(res=>{
        this.$message({
            message: '修改成功',
            type: 'success'
        });
        this.closeDia()
    })
},
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。