关于javascript:遍历生成elupload上传组件及遍历回填elupload上传数据

关上思否发现还有两篇 18 年写的文章没公布
粗略看了下没什么问题，也能看懂是什么那就公布吧！

遍历生成上传组件及遍历回填上传数据

用户抉择产品
依据用户抉择的不同产品给出要上传的证件类型(如身份证件，学历证件，荣誉证书，资格证书等)
这些证件类型能够配置
每种证件类型可上传多个文件

开发时就把所有配置的证件类型都写在页面上，如果用户抉择的产品里有则显示该证件供用户上传
提交表单时增加一个字段用于判断是那种类型的证件

毛病：如果新增证件类型，须要前段硬编码，否则无奈增加

因为计划一的毛病于是有了计划二

遍历所有服务端配置的证件类型(itemList)
循环生成上传字段
依据用户抉择的产品判断该上传字段是否显示

<el-form-item :label="item.codeName"
              :key="item.codeName"
              data-info="依据用户抉择判断是否显示该上传字段"
              v-if="showLine(item.codeTag)"
              v-for="item in itemList">
    <el-upload :ref = "item.codeTag"
               :action="uploadUrl">
        <el-button icon="upload"> 上传{{item.codeName}}</el-button>
    </el-upload>
</el-form-item>

methods:{dealFileUploadForServer () {
    let item = this.itemList
    let _upfiles = []
    let _this = this
    try {
      item.forEach(ele => {
        // 取到 ref 是个数组取第一个 
        let ref = _this.$refs[ele.codeTag]
        let uplist = ref !== undefined ? ref[0].uploadFiles : undefined
        // console.log('uplist', uplist, ele.codeTag)
        if (uplist !== undefined) {for (let i = 0; i < uplist.length; i++) {let result = uplist[i].response.result
            if (result === null) {return} else {result = result[0]
            }
            let upFile = {
              name: result.name,
              uploadFileId: result.uploadFileId,
              // 该字段用于确定证件类型
              fileLabel: 'item_' + ele.codeTag,
            }
            _upfiles.push(upFile)
          }
        }
      })
    } catch (e) {console.error('上传文件局部产生谬误：', e)
    }
    // console.log('uploader', _upfiles)
    return _upfiles
  },
}

el-upload组件上传文件回填上传文件信息

methods:{fillUploadFiles () {
        // 获取已上传文件
        let files = this.files
        for (let i = 0; i < files.length; i++) {let file = files[i]
            let key = '' // 用于表明属于哪种证件类型
            try {key = file.fileLabel.split('_')[1]
            } catch (e) {console.error('获取上传文件 label 出错', e)
            }
            if (key !== '') {
                let obj = {
                    name: file.name,// 回填显示名称
                    status: 'success',// 回填显示状态
                    response: {
                        result: [{
                            name: file.name,// 表格提交用到文件名
                            uploadFileId: file.uploadFileId,// 表格提交用到
                        }]
                    }
                }
                console.log('这里能够获取 refs, 能够获取 key，然而无奈获取 this.$refs[key]须要在 nextTick 里能力获取到信息')
                this.$nextTick(vm => {
                  // push 进 uploadFiles 能够让 el-upload 组件胜利进行回填显示
                  // TIPS: 在 for 循环里应用 nextTick 不确定会不会有性能或其余影响
                    this.$refs[key][0].uploadFiles.push(obj)
                })
            }
        }
    },
}

关于javascript:遍历生成elupload上传组件及遍历回填elupload上传数据

背景：

实现计划一：

计划二：