问题描述:正常吧fileList放在payForm里面的话,验证每次输入其他input都会导致上传文件的刷新
所以需要把保存文件和验证文件分开存储,来验证,这样才能不出现界面BUG
<el-form ref="payForm" :model="payForm" :rules="payFormRules" label-width="150px">
<el-form-item label="支付款项账号:" prop="pay_account">
<el-select v-model="payForm.pay_account" placeholder="请选择">
<el-option
v-for="item in accountOptions"
:key="item.data_id"
:label="item.data_name"
:value="item.data_id"
/>
</el-select>
</el-form-item>
<el-form-item label="支付款项方式" prop="pay_way">
<el-select v-model="payForm.pay_way" placeholder="请选择">
<el-option
v-for="item in payWayOptions"
:key="item.data_id"
:label="item.data_name"
:value="item.data_id"
/>
</el-select>
</el-form-item>
<el-form-item label="上传附件:" prop="prod_img">
<el-upload
ref="upload"
:action="uploadImageAction"
:headers="requestHeader"
accept=".png, .jpg, .gif, .jpeg"
list-type="picture-card"
:file-list="fileList"
:on-success="handleSuccess"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl">
</el-dialog>
</el-form-item>
data(){
form: { product_part_json: [], prod_img: '' },
accountOptions: [],
payWayOptions: [],
payForm: { contract_id: null, prod_img: ''},
payFormRules: Object.freeze({
pay_account: [{ required: true, message: '必选项不能为空', trigger: 'blur' }],
pay_way: [{ required: true, message: '必选项不能为空', trigger: 'blur' }],
prod_img: [{
message: '请上传',
required: true
}],
remark: [{ required: true, message: '必选项不能为空', trigger: 'blur' }],
amount: [
{ required: true, message: '请输入数值', trigger: 'blur' },
{
validator: chkNum,
message: '格式不正确,请保留两位小数',
trigger: 'blur',
},
],
commission: [
{ required: true, message: '请输入数值', trigger: 'blur' },
{
validator: chkNum,
message: '格式不正确,请保留两位小数',
trigger: 'blur',
},
],
}),
}
computed: {
fileList() {
if (this.form.prod_img) {
return this.form.prod_img.split(',').map((item, key) => {
return { name: `图片${key + 1}`, url: item }
})
}
return []
},
uploadImageAction() {
return `${process.env.VUE_APP_BASE_API}/common/uploadImg`
},
},
methods:{
// 图片 - 上传成功
handleSuccess(response, file, fileList) {
const imgList = fileList.map((item) => {
if (item.response.code === 200) {
return item.response.data.data.oss_url
}
return ''
})
this.form.prod_img = imgList.join(',')
this.payForm.prod_img = this.form.prod_img // 这里
this.$refs.payForm.clearValidate()
},
// 支付定金
async addBtnPay(payForm) {
this.$refs.payForm.validate(async item => {
if (item) {
try {
const { code, message, data } = await saveOrderContractDeposit({ ...this.payForm, voucher: this.form.prod_img })
if (code !== 200) return this.$message.fail(message)
this.payDialogFormVisible = false
this.$message.success(message)
this._fetchData()
} catch (err) {
throw new Error(err)
}
} else {
return false
}
})
},
}