如何在 React 项目中显示图像预览？

Question

所以我有这个应用程序，我想 select 一张图片并将其上传到 mongodb 并在前端显示它，在 React 组件中。一切正常，但我不知道如何在上传之前显示图像的预览。我到目前为止是这样的：

selected 图像和预览的两个变量：

 const [selectedFile, setSelectedFile] = React.useState(isAuthenticated().avatar || {});
 const [imagePreview, setImagePreview] = React.useState('');

以及在输入 onChange 事件时触发的函数：

const fileSelectedHandler = evt => {
        evt.preventDefault();
        setSelectedFile(evt.target.files[0]);

        const reader = new FileReader();

        reader.onloadend = (selected) => setImagePreview(selected.target.result);
        reader.readAsDataURL(evt.target.files[0]);
    };

以及显示预览的图像。在这里我做到了，如果 imagePreview 不是一个空字符串来显示预览，否则只是已经从 mongodb:

加载的图像

{imagePreview != ''
    ? <img src={imagePreview} alt='preview' />
    : <img src={`data:${mimeType};base64, ${thumb}`} alt={fileName} />}

当然还有表格：

<form onSubmit={uploadProfileImage}>
    <input type="file" name="image" onChange={fileSelectedHandler}/>
    <label htmlFor="profile-image">Choose image</label>
    <input type="submit" value='Upload'/>
</form>

所有这些都不会破坏我的应用程序，并且在提交时上传新文件总是可以正常工作，但我不知道如何在上传前让预览可见。

Answer 1

您可以从文件中创建一个对象 URL 然后使用它：


      handleFileChange(event) {
        this.setState({
          file: URL.createObjectURL(event.target.files[0])
        })
      }

      render() {
        return (
          <div>
            <input type="file" onChange={this.handleFileChange}/>
            <img src={this.state.file}/>
          </div>
        );
      }

您还可以在卸载阶段通过以下方式释放对象 URL 占用的内存：

URL.revokeObjectURL(objectUrl)

如何在 React 项目中显示图像预览？

How can I make an image preview show up on a react project?

filereader

mongodb

reactjs