如何在 PUT 请求后从 s3.amazonaws.com 获取图像 url？

Question

我正在尝试处理上传到 s3.amazonaws.com 的问题。

我写了两个回调：

1. 从我的后端获取 url 以进行上传。
2. 使用第一次回调中的“上传 url”将我的图像放在 s3 上。

但是我无法从 s3 接收我上传的图片的 url。 PUT 请求后我得到一个空响应。

我有这段代码：

// callback for getting upload url from my backend - works OK
const getPresignedUrl = useCallback(
  async (imageName: string) => {
    const configurationObject = {
      method: 'get',
      url: getUploadUrl(imageName, uploadImageCategory.AVATARS),
      headers: {
        Authorization: `Bearer ${token}`,
      },
    };
    const {data} = await axios(configurationObject);
    return data;
  },
  [getUploadUrl, token],
);

// function to get image body from uri - also OK
const getBlob = async (fileUri: string) => {
  const resp = await fetch(fileUri);
  const imageBody = await resp.blob();
  return imageBody;
};

// callback that puts my image to s3 server - seems like it's OK
const uploadUsingPresignedUrl = useCallback(
  async (preSignedUrl: string) => {
    const imageBody = await getBlob(uri);

    const configurationObject = {
      method: 'PUT',
      url: preSignedUrl,
      data: {
        body: imageBody,
      },
    };

    const {data} = await axios(configurationObject);
    return data;
  },
  [uri],
);

在代码中，我进一步调用了这些函数：

const onUploadImage = useCallback(async () => {
  const imageName = getImageName(uri); //just util for getting right image name

  const presignedUrl = await getPresignedUrl(imageName);
  console.log('presignedUrl', presignedUrl); // I see generated URL in response

  const putImageOnAws = await uploadUsingPresignedUrl(presignedUrl);
  console.log('putImageOnAws', putImageOnAws); // Response is empty

}, [getImageName, getPresignedUrl, uploadUsingPresignedUrl, uri]);

useEffect(() => {
  if (uri) {
    setAvatar(uri);
    onUploadImage()
      .then()
      .catch(err => console.log('err: ', err));
  }
}, [onUploadImage, uri]);

因此，当我调用 putImageOnAws 时，我得到的响应是空的。 我虽然应该有一个链接到我上传的图片......

所以我的问题是 - 如何获取我在 s3 上上传的图片的 url？

Answer 1

上传后文件的 url 中不会有您尚未拥有的特殊数据。 当您请求预签名 url 时，您已经指定了文件密钥（路径）和文件名。 因此，使用这些详细信息，您可以自己构建文件 url。 这实际上取决于您的用例。 如果您的 s3 存储桶是通过云端分发公开的，则您的文件 url 如下所示，

https://<your-cloudfront-url>/<your-file-key-or-path>/<your-file-name-with-extension>

请为您的特定场景添加有关 s3 存储桶配置的更多详细信息。