Reactjs 如何使图像预览显示在react项目上？

因此，我有一个应用程序，我想选择一个图像并将其上传到mongodb上，并在前端的react组件中显示它。一个everythinh的作品很好，除了我不知道如何显示预览图像之前上传它。到目前为止，我得到的是：

选定图像和预览的两个变量：

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

以及在inputs 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} />}

{imagePreview！=''
? 
: }

当然还有形式：

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

选择图像

---

所有这些都不会破坏我的应用程序，在onsubmit上传一个新文件总是可以正常工作，但我不知道如何在上传之前使预览可见。

你可以从文件中创建一个对象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.revokeObjectURL(objectUrl)