使用 Amplify 的 Storage.put 将多个文件添加到 S3

Question

期望：

输入元素接受多个图像文件， AWS-Amplify's异步Storage.put()将它们添加到预配置的 S3 存储桶中。

问题

我尝试了使用for in循环的解决方案，但它似乎跳过了try catch块。

输入元素

            <input
              type="file"
              hidden
              multiple
              accept="image/*"
              onChange={onChange}
            />

OnChange函数

  async function onChange(e) {
    try {
      for (const file of e.target.files) {
        console.log("Start of Loop")
        await Storage.put(file.name, file, {
          metadata: [
            { name: file.name },
            { lastModifiedDate: file.lastModifiedDate },
            { type: file.type },
          ],
          level: "protected",
          contentType: "image/*",
        });
        console.log("End of for loop");
      }
    } catch (error) {
      console.log("Error uploading file: ", error);
    }
  }

Console.logs()

链接到 Amplify 的Storage.put()信息： https ://docs.amplify.aws/lib/storage/upload/q/platform/js/

Answer 1

将多个文件上传到 S3 的简单解决方案。

Mui 的前端组件：

      <Button
        size={"large"}
        component="label"
        variant={"outlined"}
        sx={{ marginTop: { xs: 2, md: 0 } }}
      >
        <input
          type="file"
          hidden
          multiple
          accept="image/*"
          onChange={onChange}
        />
        Upload
      </Button>

需要的for in loop ：

  async function onChange(e) {
      for (const file of e.target.files) {
        Storage.put(file.name, file, {
          level: "protected",
          contentType: "image/*",
        })
          .then((result) => console.log(result))
          .catch((err) => console.log(err));;
        console.log("End of for loop");
      }
  }

要了解有关Storage.put()工作原理的更多信息，请访问此链接： https ://docs.amplify.aws/lib/storage/upload/q/platform/js/