reactjs - 使用 React Functions 预览图片上传

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

我如何使用这种语法预览它？

我收到 Prop “src”和“alt”无效值的错误

Answer 1

你需要使用 state 让 React 知道什么时候重新渲染。你可以使用 useState hook 来保存你的组件状态和文件信息，当它发生变化时，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"/>