我們常常會(huì)遇到這樣的需求省艳，就是有個(gè)表單娘纷，我們需要先填寫一些表單數(shù)據(jù)，然后選擇上傳的文件跋炕，然后再提交給后端處理赖晶。
<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="微信支付商號(hào)" 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">只能上傳證書文件，且不超過(guò)500kb</div>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">確認(rèn)修改</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()
})
},
