如何在aws sdk js v3上上傳多張圖片？

Question

這是用於單張圖片上傳：

const [img, setImg] = useState<File>(); 

<input type="file" id="file" onChange={fileChange} />

this if 上傳處理程序

const handleUpload = async () => {

// ARRAY OF IMAGES
const mediaData = new FormData();
for (var i = 0; i < file.length; i++) {
  mediaData.append('media[]', file[i]);
}



// aws-sdk upload for single image 

const path = `events/${eventDetails.id}/${img?.name}`;

const target = {
  Bucket: process.env.REACT_APP_HOST_AWS_BUCKET,
  Key: path,
  Body: img,
  ContentType: 'image/jpg',
};
const creds = {
  accessKeyId: process.env.REACT_APP_HOST_AWS_ACCESS_KEY_ID || '',
  secretAccessKey: process.env.REACT_APP_HOST_AWS_SECRET_ACCESS_KEY || '',
};
try {
  const parallelUploads3 = new Upload({
    client: new S3Client({
      region: process.env.REACT_APP_HOST_AWS_DEFAULT_REGION || '',
      credentials: creds,
    }),
    leavePartsOnError: false,
    params: target,
  });

  parallelUploads3.on('httpUploadProgress', (progress) => {
    console.log(progress);
  });

  parallelUploads3.done();
} catch (e) {
  console.log(e);
}

這是我為單個圖像上傳所做的並且它有效，但是我想要上傳多個文件（上面提到的圖像數組 mediaData），我該如何實現呢？ 我不知道如何在沒有任何幫助的情況下實現這一目標。

Answer 1

用於並行上傳多張圖片並獲取上傳進度

  const handleUploadImage = () => {

  for (var i = 0; i < file.length; i++) {
  const imgFile = file[i];


  const path = `folder/${file[i].name}`;

  const target = {
  Bucket: process.env.REACT_APP_HOST_AWS_BUCKET,
  Key: path,
  Body: imgFile,
  ContentType: "image/jpeg"
  };
  const creds = {
  accessKeyId: process.env.REACT_APP_HOST_AWS_ACCESS_KEY_ID || "",
  secretAccessKey:   process.env.REACT_APP_HOST_AWS_SECRET_ACCESS_KEY || ""
  };
  try {
  const parallelUploads3 = new Upload({
    client: new S3Client({
      region: process.env.REACT_APP_HOST_AWS_DEFAULT_REGION || "",
      credentials: creds
    }),
    leavePartsOnError: true,
    partSize: 1024 * 1024 * 1000,
    params: target
  });

  parallelUploads3.on("httpUploadProgress", (progress: any) => {});

  await parallelUploads3.done();
  } catch (e) {
  console.error(e);
  }
  }

}