Question

我正在创建一个React表单，用户可以在其中上传图像。我正在使用下面给出的函数createObjectURL（），将其设置为状态。

这是图像组件

<Row className="form-row">
                    <Col md={8} className="image-field">
                        <div className="input-image-file">
                            <img src={this.state.image} className="myimage" alt="choose an image"></img>
                        </div>
                    </Col>
                    <Col md={4} className="image-buttons">
                        <Row className="form-row"> 
                            <FormControl type="file" onChange={this.onImageChange.bind(this)} ></FormControl>
                        </Row>
                        <Row className="form-row">
                            <Button className="delete-image" onClick={this.deleteImage.bind(this)}><i className="fa fa-trash"></i> Delete</Button>
                        </Row>
                    </Col>
                </Row>

这是onImageChange和deleteImage函数

onImageChange(event){
    this.setState({image: URL.createObjectURL(event.target.files[0])},()=>{
        console.log(this.state.image)
    })
}

deleteImage(){
    this.setState({image : null})
}

URL就像

"blob:http://localhost:3000/e5531071-c8fc-46db-a934-98678c1cec3a"

我将此数据发送到后端，并在mongodb中创建一个条目，URL正确保存在哪里。我有一个名为edit的选项，该选项可检索表单的所有内容供用户进行编辑。除图像外，所有内容都将显示。 我收到类似的错误

获取blob：http://localhost:3000/e5531071-c8fc-46db-a934-98678c1cec3a 404（未找到）

请帮助我，谢谢this is the console error log

在react

0 个答案: