如何将AWS Amplify V6 getUrl()输出转换为V5格式的预签名URL字符串？

核心解决方法是访问返回对象中的url属性（这是标准的URL对象），通过toString()方法或href属性将其转换为字符串格式的URL，和V5返回的预签名URL格式完全一致。

修改你的useImage钩子代码如下：

import { useState, useEffect } from "react";
import { uploadData, getUrl, remove } from "aws-amplify/storage";

export default function useImage(img) {
  const [photo, setPhoto] = useState({ uri: null });
  const getImage = async () => {
    if (img) {
      try {
        const imageURL = await getUrl(img.key);
        // 将URL对象转换为字符串格式
        setPhoto({
          uri: imageURL.url.toString() 
          // 也可以使用 imageURL.url.href，效果完全相同
        });
      } catch (e) {
        console.log(e);
      }
    }
  };
  useEffect(() => {
    getImage();
  }, [img]); // 添加img作为依赖，确保img变化时重新获取URL

  return { photo, setPhoto };
}

补充说明 #

• 标准URL对象的toString()方法会返回包含协议、主机、路径及查询参数的完整字符串URL，和V5返回的预签名URL格式完全兼容。
• href属性同样能获取到相同的字符串结果，两种方式可任选其一。
• 给useEffect添加img依赖项，能保证当传入的图片对象发生变化时，自动重新获取对应的预签名URL，避免数据不一致。

内容的提问来源于stack exchange，提问作者Adhi