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

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

在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 }))
        }
      })
    },

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值