如何让图片预览显示在react项目中？

Question

我有一个应用程序，我想选择一个图片，并将其上传到mongodb和显示在前端，在反应组件。一切都很顺利，只是我不知道如何在上传图片前显示出图片的预览。到目前为止，我所做的是这样的。

两个变量分别用于选定的图片和预览。

 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>

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

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>
        );
      }

你也可以在unmount阶段释放对象URL所占用的内存，方法是：

URL.revokeObjectURL(objectUrl)