我无法使用 FileReader 预览图像答案

【问题标题】：I can't preview the image using FileReader我无法使用 FileReader 预览图像
【发布时间】：2023-01-12 10:31:43
【问题描述】：

我在 reactjs 中遇到文件读取器问题，确实我想在加载后预览图像，但状态管理器不会更改并且图像不会加载

import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { isEmpty } from "../../Components/Utils";
import Img from "../../styles/assets/icons/img.svg";
import { createProduct } from "../../actions/product.action";
const AddProduct = () => {
  const [productText, setProductText] = useState("");
  const [productFile, setProductFile] = useState();
  const [productPrice, setProductPrice] = useState(0);
  const [productImg, setProductImg] = useState("");
  const [isDownload, setIsDownload] = useState(false);
  const [preview, setPreview] = useState("");

  const categories = useSelector((state) => state.categoriesReducer);

  const dispatch = useDispatch();

  const handlePreviewImg = (e) => {
    const reader = new FileReader();

    reader.onLoad = () => {
      if (reader.readyState === 2) {
        setPreview(reader.result);
        setIsDownload(true);
      }
    };

    reader.readAsDataURL(e.target.files[0]);
    setProductFile(e.target.files[0]);
  };

然后我尝试在输入文件标签中记录，以便可以考虑上传

<div className="dashboard__categories__form__picture add__product__picture">
            <input
              type="file"
              name="product"
              id="file"
              accept=".jpg, .jpeg, .png"
              className="inputfile"
              onChange={handlePreviewImg}
            />
            <label htmlFor="file">
              {!isDownload ? (
                <img src={Img} alt="icons" />
              ) : (
                <img src={preview} alt="categorie-pic" />
              )}
            </label>
          </div>

问题是什么？请帮忙

【问题讨论】：

标签： reactjs

【解决方案1】：

也许你可以使用URL.createObjectURL

const handlePreviewImg = (e) => {
  const blobUrl = URL.createObjectURL(e.target.files[0]);
  setPreview(blobUrl);
}

【讨论】：