JS 如何从 api 获取照片并使用 FileReader() 将其添加到 localStorage？

Question

我挣扎了一段时间。 我有一个 Api，可以给我图像/jpeg 格式的照片。 我希望使用 FileReader() 将它保存在 localStorage 中。 任何人都可以帮忙吗？

我尝试使用 File() 和所有愚蠢的解决方案。

Answer 1

您只需要获取它，然后将其转换为 blob 字符串； 这是一个例子：

const API_URL = "https://source.unsplash.com/collection/928423/480x480";

function App() {
  const imageRef = React.useRef<HTMLImageElement>(null);
  const [isLoading, setIsLoading] = React.useState(true);
  const [isError, setIsError] = React.useState(false);

  React.useEffect(() => {
    const fileReader = new FileReader();

    fileReader.addEventListener("load", (event) => {
      setIsLoading(false);
      const blobString = event.target?.result as string;
      localStorage.setItem("image", blobString);
      if (imageRef.current) imageRef.current.setAttribute("src", blobString);
    });

    fileReader.addEventListener("error", () => setIsError(true));

    fetch(API_URL)
      .then((res) => res.blob())
      .then((blob) => fileReader.readAsDataURL(blob))
      .catch(() => setIsError(true));
  }, []);

  React.useEffect(() => {
    const image = localStorage.getItem("image");
    if (image && imageRef.current) imageRef.current.setAttribute("src", image);
  }, []);

  return (
    <div className="App">
      <h1>
        {isLoading ? "Hold on!" : isError ? "Ops! There is an error!" : "Done!"}
      </h1>
      <img ref={imageRef} alt="test-imag3" />
    </div>
  );
}

如果你想测试它，这里是运行代码沙箱：

https://codesandbox.io/s/store-image-in-localstorage-kj8606?file=/src/App.tsx

ps：由于 5Mg 存储限制，请考虑使用 indexedDB 而不是 localStorage