如何在 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 存儲桶配置的更多詳細信息。