使用React函数进行预览图像上传

Question

您好，我正在尝试制作一个图像上传和预览，但我只能找到有关如何使用类组件完成此操作的react教程

import React from 'react';


const AddNew = () => {
    const fileHandler = (event) => {
        console.log(event.target.files[0])
    }
    const alt = (event) => {
        return(event.target.files[0].name)
    }
    const preview = (event) => {
        return (
            URL.createObjectURL(event.target.files[0])
        )
    }
    return (
        <div className="addNew">
            <img src={preview} alt={alt}/>
            <input type="file" onChange={fileHandler} />
        </div>
    )
}

export default AddNew

如何使用此语法进行预览？

我收到一个错误，因为属性'src‘和'alt’的值无效

Answer 1

您需要使用state让React知道何时重新呈现。你可以使用useState钩子来保存你的组件状态和文件信息，当它发生变化时，React就知道是时候渲染了。

​

const AddNew = ({}) => {
    const [file, setFile] = React.useState(null)
    
    const fileHandler = (e) => {
        setFile(e.target.files[0])
    }
    
    return (
        <div>
            <img src={file? URL.createObjectURL(file) : null} alt={file? file.name : null}/>
            <input type="file" onChange={fileHandler} />
        </div>
    )
}



ReactDOM.render(<AddNew />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"/>

​

Answer 2

使用一点状态为src和alt提供初始值，并保存更新后的值。

const initialState = { alt: "", src: "" };

const AddNew = () => {
  const [{ alt, src }, setPreview] = useState(initialState);

  const fileHandler = event => {
    const { files } = event.target;
    setPreview(
      files.length
        ? {
            src: URL.createObjectURL(files[0]),
            alt: files[0].name
          }
        : initialState
    );
  };

  return (
    <div className="addNew">
      <img className="preview" src={src} alt={alt} />
      <input accept="image/*" type="file" onChange={fileHandler} />
    </div>
  );
};

​

​

Answer 3

您需要使用FileReader将图片转换为base64字符串。假设您正在进行单个文件上传，只需维护一个状态，例如：file，并在filereader onload侦听器完成读取图像后设置该状态。

代码的工作副本在这里：

import React, { useState } from "react";

const AddNew = () => {
  const [file, setFile] = useState(null);
  const fileHandler = event => {
    console.log(event.target.files[0]);
    let reader = new FileReader();
    reader.onload = function(e) {
      setFile(e.target.result);
    };
    reader.readAsDataURL(event.target.files[0]);
  };

  return (
    <div className="addNew">
      <img src={file} alt={""} />
      <input type="file" onChange={fileHandler} />
    </div>
  );
};

export default AddNew;