技術標籤：vantvue

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]
})