文件上傳器不顯示圖片

Question

我有個問題。 我正在創建一個小文件上傳器，用於上傳照片。 如果用戶按下文件上傳器正在顯示的圖標，然后他可以 select 一張照片。 選擇照片后不顯示。 問題究竟出在哪里？

import React, { useState } from 'react';

const Profilpic = () => {
  const [preview, setPreview] = useState(null);

  const fileSelectedHandler = (event) => {
    console.log(event.target.files[0]);
    if (event.target.files[0].size > 71680) {
      alert('File is too big! Wie Samys Dick');
    } else {
      setPreview(event.target.files[0]);
    }
  };

  return (
    <div>
      {preview ? (
        <img src={preview} alt="Preview" width="150px" height="150px" />
      ) : (
        <div>
          <label htmlFor="myInput">
            <i className="fas fa-user-circle"></i>
          </label>
          <input
            id="myInput"
            style={{ display: 'none' }}
            type={'file'}
            onChange={fileSelectedHandler}
          />
        </div>
      )}
    </div>
  );
};

export default Profilpic;

Answer 1

首先從輸入標簽中刪除樣式標簽，然后將 function 替換為

const fileSelectedHandler = (event) => {
    console.log(event.target.files[0]);

    if (event.target.files[0].size > 71680) {
      alert("File is too big! Wie Samys Dick");
    } else {
      const reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]);
      reader.onloadend = () => {
        setPreview(reader.result);
      };
    }
  };

Answer 2

這對你有用。 您只需要為您選擇的圖像創建 URL。

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [preview, setPreview] = useState(null);

  const fileSelectedHandler = (event) => {
    console.log(event.target.files[0]);
    if (event.target.files[0].size > 71680) {
      alert("File is too big! Wie Samys Dick");
    } else {
      let img = URL.createObjectURL(event.target.files[0]);
      setPreview(img);
    }
  };

  console.log(preview);

  return (
    <div>
      {preview ? (
        <img src={preview} alt="Preview" />
          ) : (
        <input id="myInput" type="file" onChange={fileSelectedHandler} />
      )}
    </div>
  );
}