在上传图像之前在React中显示图像

Question

因此，我创建了让用户上传少量图像的表单。我正在使用react-dropzone使其更酷; p 不幸的是，在选择映像之后，我有未定义的src属性。 这里是我的代码：

export const ImageInput = (props) => { 
    const imagePreviews = props.images.map(image => { 
    return <ImagePreview key={image.id} image={image.image}/> 
    }) 

    return (
    <div> 
     <Dropzone 
     className="dropzone" 
     multiple={true} 
     accept="image/*" 
     onDrop={props.addImage}> I STORE THE IMAGES IN PARENT COMPONENT 
     <p>drop or click here</p> 
     </Dropzone> 
     <ul> 
     {imagePreviews} 
     </ul> 
    </div> 
    ) 
} 

这是单ImagePreview组件

export const ImagePreview = (props) => { 
    let imagePreviewUrl = ""; 
    let reader = new FileReader(); 
    reader.readAsDataURL(props.image) 
    reader.onloadend =() => { 
     imagePreviewUrl = reader.result; 
    } 
    console.log(imagePreviewUrl) 

    return (
    <li className=""> 
     <img className="image-preview" src={imagePreviewUrl} /> 
    </li> 
) 
} 

使用反应浏览器工具，我可以证明，图像被正确保存 image

我在哪里制作错误？

Answer 1

reader.onloadend是异步的，因此在imagePreviewUrl有值之前，“ImagePreview”将返回。您无法将此代码用于“ImagePreview”

class ImagePreview extends React.Component { 
    constructor() { 
    super(); 
    this.state= {imagePreviewUrl: ''} 
    } 

    componentWillMount() { 
    let reader = new FileReader(); 
    reader.readAsDataURL(props.image) 
    reader.onloadend =() => { 
     this.setState({imagePreviewUrl: reader.result}) 
    } 
    } 
}