在parser.vue文件里面:
1、在data里对上传文件进行拦截
data() {
const data = {
formConfCopy: deepClone(this.formConf),
[this.formConf.formModel]: {},
[this.formConf.formRules]: {}
}
this.initFormData(data.formConfCopy.fields, data[this.formConf.formModel])
this.buildRules(data.formConfCopy.fields, data[this.formConf.formRules])
// 在data里对上传文件数据进行拦截
this.bindUploadSuccess(data.formConfCopy.fields)
return data
},
2、处理上传成功之后逻辑
// 为el-upload绑定一个on-success事件,并将返回值返回给表单
bindUploadSuccess(fields) {
fields.map((item) => {
if (item.action) {
item['on-success'] = (res, file, fileList) => {
// 构造后端接口所需 文件格式
let filePara = fileList.map((fileItem) => {
return {
name: fileItem.name,
percentage: fileItem.percentage,
status: fileItem.status,
uid: fileItem.uid,
url: fileItem.response.data.url,
size: fileItem.size,
}
})
setValue.call(this, filePara, item.__config__, item)//绑定数据
}
}
})
}
// 初始化formdata,回显数据
initFormData(componentList, formData) {
componentList.forEach(cur => {
const config = cur.__config__
if (cur.__vModel__) formData[cur.__vModel__] = config.defaultValue//默认回显defaultValue
if (config.children) this.initFormData(config.children, formData)
// 上传组件回显数据
if (config.tag === 'el-upload' && config.defaultValue) {
cur['file-list'] = (config.defaultValue || []).map(value => ({ 'name': value.name, 'url': value.url }))
}
})
},