如何在浏览器中查看上传的图像 [重复]

Question

我有一个 react 前端，我想在上传图片时在浏览器上查看图片。 下面是我的上传功能

onDrop = async (files) => {

    const FILES = {
        "uploaded_image": [{
            name: files[0].name, <- Name prints on screen succesfully
            image: files[0].file, <- It is just empty
        }]
    }

    this.setState({
          ...some states
    })
   ..some calls
}

下面是渲染图

<div>
     <Image
     src={this.state.files[0].image}
     />
 </div>

图像显示如果我直接硬编码该字段，

image: require(`static_media/car.png`).default

但是我想在不硬编码的情况下显示上传文件的路径，我该如何修改onDrop中的image field来做到这一点？

Answer 1

你需要使用 URL.createObjectURL(files[0])

 const FILES = {
    "uploaded_image": [{
        name: files[0].name, <- Name prints on screen succesfully
        image: URL.createObjectURL(files[0]), <- It is just empty
    }]
}