当前位置: 首页 > 工具软件 > model-gen > 使用案例 >

form-gen-parser处理el-upload上传和提交表单后回显

刘丰羽
2023-12-01

目前并没有办法处理文件上传成功之后的回调

在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)//绑定数据
          }
        }
      })
    }

提交表单后如果需要回显,在parser.vue文件里面-上传组件回显数据:

// 初始化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 }))
        }
      })
    },

 类似资料: