用uni-forms的setValue方法
- name: 表单域对应的name
- value: 表单域对应的值
this.$refs.form.setValue(name,value)
html
<uni-forms v-else ref="form" :modelValue="info" :label-width="100" :rules="rules">
<uni-forms-item label="从业人员照片" required name="xpPath">
<u-upload
:fileList="xpList"
@afterRead="afterReadXp"
@delete="deleteXp"
name="1"
:maxCount="1"
previewImage
v-model="info.xpPath"
></u-upload>
</uni-forms-item>
<u-button type="primary" text="提交" @click="submit"></u-button>
</uni-forms>
js
图片上传完成之后,使用setValue方法,手动将图片值加入到uni-forms的校验,再次触发校验
this.$refs.form.setValue('xpPath',this.info.xpPath)
data() {
return {
info: {},
rules: {
xpPath: {
rules: [{
required: true,
errorMessage: '请选择从业人员照片'
}]
},
},
xpList: [],
}
},
methods:{
// 删除从业人员照片
deleteXp(event) {
this.xpList = []
},
// 新增从业人员照片
async afterReadXp(e) {
const res = await this.uploadFilePromise(e.file.url)
this.info.xpPath = JSON.parse(res.data).data
this.$refs.form.setValue('xpPath',this.info.xpPath)//手动将图片值加入到uni-forms的校验
this.xpList = [{
url: JSON.parse(res.data).data
}]
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: 'http://192.168.2.21:7001/upload', // 仅为示例,非真实的接口地址
filePath: url,
name: 'file',
formData: {
user: 'test'
},
success: (res) => {
setTimeout(() => {
resolve(res)
}, 500);
}
});
})
},
submit() {
this.$refs['form'].validate().then(res => {
}).catch(err => {
})
}