vant 上传图片（固定n张， 循环实现）， after-read自定义传参

vant 上传图片（固定n张， 循环实现）

直观第一想法是写4个van-uploader组件，每个组件的方法单独分开（或者方法不分开传参不同分辨），但是一个两个还好， 2个以上这种方法使得代码冗余。

图片效果展示
（8张图片上传）

需求：
1、展示上传提示
2、命名与后端要求一致
3、可以编辑，进行回显

html代码

<div>
   <van-row type="flex" justify="space-around">
     <van-col span='6' v-for="(item, index) in xianchang" :key='index'>
       <van-uploader v-model="item.fileList" :after-read="afterRead(item)"
        :upload-text='item.value'  :max-size="20480 * 1024" :before-delete="beforeDelete(item)"
        :max-count="1" :before-read="beforeRead"  capture="camera"
        accept="image/*" />
     </van-col>
   </van-row>
</div>

声明数组，包含后端要的命名key， 上传提示value，以及上传的文件数组

photo: Array<any> = [
        {
            key: "xiaoqu",
            value: "小区",
            fileList: []
        },
        {   
            key: "louhao",
            value: "楼号",
            fileList: []
        },
        {
            key: "danyuan",
            value: "单元",
            fileList: []
        },
        { 
            key: "menpai",
            value: "门牌",
            fileList: []
        },
        {   
            key: "keting",
            value: "客厅",
            fileList: []
        },
        {   
            key: "zhuwo",
            value: "主卧",
            fileList: []
        },
        {   
            key: "weishengjian",
            value: "卫生间",
            fileList: []
        },
        {   
            key: "chufang",
            value: "厨房",
            fileList: []
        },
    ]

ps： 循环出来的组件最重要的是事件处理， 需要判断哪个组件上传哪个图片，对图片进行处理，主要涉及after-read
before-delete

此需求需用到after-read 来处理文件名称
after-read要传自定义参数需将file进行return

在没有return之前可以对file对象进行改名字，添加属性等操作，但是将file进行return之后对file对象操作无效。

afterRead(obj: object) {
  // 重点代码
  return (file: any) => {
    this.photo.forEach((v: any)=> {
      if(v.key == obj.key) {
        v.fileList[0].name = obj.key
      }
    })
  }
}

另外一个注意点：回显图片， 进行二次编辑。
此处后端接口返回是一个大数组，包含上传的8张图片未分类

let resultList: Array<any> = []  // 为后端接口返回
// 
let obj: object= {
   xiaoqu: [],
   louhao: [],
   danyuan: [],
   menpai: [],
   keting: [],
   zhuwo: [],
   weishengjian: [],
   chufang: []
}
// 辨别是哪个图片
resultList.forEach((v: any)=> [
   obj[v.name.split('.')[0]] = [v]
])
this.photo.forEach((_v: any)=> {
   _v.fileList = obj[_v.key]
})