20180510_遍历生成el-upload上传组件及遍历回填el-upload上传数据

背景：

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

实现方案一：

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

缺点：如果新增证件类型，需要前段硬编码，否则无法添加

由于方案一的缺点于是有了

方案二：

遍历所有服务端配置的证件类型(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)
                })
            }
        }
    },
}

openks / learn-vue

20180510_遍历生成el-upload上传组件及遍历回填el-upload上传数据 #108

背景：

实现方案一：

方案二：