我们常常会遇到这样的需求,就是有个表单,我们需要先填写一些表单数据,然后选择上传的文件,然后再提交给后端处理。
<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()
})
},