批量刷csv文件里的数据，并修改里面所存储的url对应的文件的数据

背景：

最近在开发标注平台，前一阵子开发了一个垃圾标注功能，页面长这样：

其数据结构如下：

页面里总共与484个格子，比如有7个格子里有垃圾，其余的没有，原先设计的是哪个格子里被标注了有垃圾，这个数据才往annotations存储，即annotations的数组长度为7。后来标注员标注了近100道题后，算法准备验收了，此时算法提出新需求：没被标注垃圾的格子数据也应该被存储下来。当晚我就在标注平台把这个功能加上了，但过去已经被验收了的100道题已经无法修改了。这些题导出的是一个csv文件，文件里存储的是一个zip压缩包的url链接（因为标注数据量大，所以答案一般都是先压缩打包，再oss上传到服务器），原先定的是可以重新把这100来道题带答案上题，挨个再走一遍标注的流程，但是步骤太麻烦了，还消耗大量人力和时间。

简而言之，需求就是把csv里存储的这个url打开后对应的数据进行修改，再生成新的url替换掉红框内的url。

步骤如下：

1. 提取csv文件里的数据到一个数组里，提取后的数组如下：（方法多种）

const arr = [{
	"a": "/bus_trash_0/",
	"b": "train_bj_20230523_JLBJA437350_sensor30_time20220608125031937_Trash.jpg",
	"c": "http://api.service.zhidaozhixing.com/token/data/2d/zhangxue/Trash/bus_trash/train_bj_20230523_JLBJA437350_sensor30_time20220608125031937_Trash.jpg",
	"d": "http://api.service.zhidaozhixing.com/token/20230619/v1/35665/96292536_3954173_100_0.zip"
}] 

2. 对数组中每一项的zip包链接进行下载解压，解压后的数据内容放到数组中

const newArr = await Promise.all(data1.map(async item => {
      const json = await self.commonDownLoad(item.d)
      return {
        ...item, 
        e: json,
      }
     }))

3. 对数组中每一项的e进行数据处理，补充所缺失的数据，并根据规则生成新的zip包名

const newArr2 = newArr.map(item => {
  const str = '2023' + item.d.split('2023')[1].split(/\d_0.zip/)[0] + '105_0'
  const obj = {
    a: item.a,
    b: item.b,
    c: item.c,
    d: str,
    e: item.e,
    oldUrl: item.d,
  }
  const annos = item.e.markData.annotations
  const newAnnos = GridData.shapes.map(t => {
    const aa = annos.find(v => v.index == t.index)
    if (aa) {
      return aa
    } else {
      return {
        color: null,
        name: annos[0].name,
        question: {},
        shape_type: "polygon",
        tagId: annos[0].tagId,
        tagsItems: annos[0].tagsItems,
        ...t,
        garbage_label: ['clean'],
        garbage_quantity_label: "empty",
      }
    }
  })
  item.e.markData.annotations = newAnnos
  return obj
})

4. 对数组中的每一项的e进行打包压缩，在oss上传得到一个新的url，并存储在数组中

const newArr3 = await Promise.all(newArr2.map(async item => {
      let answerUrl = await this.commonUpload(item.d, item.e)
      return {
        a: item.a, 
        b: item.b,
        c: item.c,
        d: answerUrl
      }
}))

5. 将数组写入到csv文件中，并下载

        const newArr = arr3_53.map(item => [item.a, item.b, item.c, item.d])
        const csvContent = newArr.map(row => row.join(',')).join('\n');

        const blob = new Blob([csvContent], { type: 'text/csv' });
        const downloadLink = document.createElement('a');
        downloadLink.href = URL.createObjectURL(blob);
        downloadLink.download = 'data.csv';
        downloadLink.click();

最后（我就是为了下次方便使用，纯记录下）：

 async zml(self) {
     // console.log('arr', data1, data2, data3)
     console.log('arrrr1', data1)
     const newArr = await Promise.all(data1.map(async item => {
      const json = await self.commonDownLoad(item.d)
      return {
        ...item, 
        e: json,
      }
     }))
    //  let json = await self.commonDownLoad(data3[0].d)
     console.log('newArr==', newArr)

     const newArr2 = newArr.map(item => {
      const str = '2023' + item.d.split('2023')[1].split(/\d_0.zip/)[0] + '105_0'
      const obj = {
        a: item.a,
        b: item.b,
        c: item.c,
        d: str,
        e: item.e,
        oldUrl: item.d,
      }
      const annos = item.e.markData.annotations
      const newAnnos = GridData.shapes.map(t => {
        const aa = annos.find(v => v.index == t.index)
        if (aa) {
          return aa
        } else {
          return {
            color: null,
            // id: 233,
            name: annos[0].name,
            question: {},
            shape_type: "polygon",
            tagId: annos[0].tagId,
            tagsItems: annos[0].tagsItems,
            ...t,
            garbage_label: ['clean'],
            garbage_quantity_label: "empty",
          }
        }
      })
      item.e.markData.annotations = newAnnos
      return obj
     })

     console.log('正确答案newArr2==', newArr2)
    
     const newArr3 = await Promise.all(newArr2.map(async item => {
      let answerUrl = await this.commonUpload(item.d, item.e)
      return {
        // ...item,
        // newUrl: answerUrl
        a: item.a, 
        b: item.b,
        c: item.c,
        d: answerUrl
      }
     }))

     console.log('处理后的newArr3', newArr3 , JSON.stringify(newArr3))


  }