reactjs 如何Map图像数组并上传它们,而不需要为每个图像使用相同的名称?

fwzugrvs  于 2022-12-22  发布在  React
关注(0)|答案(1)|浏览(158)

我有以下代码,其中我有一个数组的图像images和上传该数组中的每个图像。代码工作正常,但我有一个问题,其中所有上传的图像都有相同的名称ex:storage/1671621889.png.

const uploadData = async (data) => {
    const attachment = []
    const url = `http://127.0.0.1:8000/api/file/upload`
    const config = {
      headers: {
        'content-type': 'multipart/form-data'
      }
    }

    await Promise.all(images.map(async (file, index) => {
        const imageData = new FormData()
        imageData.append('file', file)
        imageData.append('fileName', file?.name)
        let result
        axios.post(url, imageData, config)
        .then(function(response) {
          result = response.data.data.file 
          attachment.push(result)
        })
    }))
    .then(() => {
      submit(data, attachment)
    })
  }

我试着等你的要求,但那改变不了什么。

carvr3hs

carvr3hs1#

您已经将上载文件名定义为file?.name,如果您必须使其对于每个请求都是唯一的,您可以简单地附加索引。

const uploadData = async (data) => {
    const attachment = []
    const url = `http://127.0.0.1:8000/api/file/upload`
    const config = {
      headers: {
        'content-type': 'multipart/form-data'
      }
    }

    await Promise.all(images.map(async (file, index) => {
        const imageData = new FormData()
        imageData.append('file', file)
        imageData.append('fileName', `${file?.name}_${index}`)
        let result
        axios.post(url, imageData, config)
        .then(function(response) {
          result = response.data.data.file 
          attachment.push(result)
        })
    }))
    .then(() => {
      submit(data, attachment)
    })
  }

相关问题