将图像上传到应用程序并预​​览后将其删除

Question

我希望在上传图像并将其发送到预览后删除图像。

我尝试了删除请求，但是它们目前无法正常工作。

class OfferMedia extends Component {
    state = {
       files: [],
       imagesPreviewUrls: []
 };
    _handleImageChange = e =>{
       e.preventDefault();

      // FileList to Array
       let files = Array.from(e.target.files);

      // File Reader for Each file and and update state arrays
        files.forEach((file, i) => {
        let reader = new FileReader();

         reader.onloadend = () => {
            this.setState(prevState => ({
              files: [...prevState.files, file],
               imagesPreviewUrls: [...prevState.imagesPreviewUrls, 
               reader.result]
          }));
       }

       reader.readAsDataURL(file);
     });
  }

      render() {
       let {imagesPreviewUrls} = this.state;
       return (

         <div className="animated">
             <Card>
                <CardHeader>
                  <h5>Image Upload</h5>
                 </CardHeader>
              <CardBody>

         <div>
          <Input className="upload" type="file" onChange={this._handleImageChange} multiple/>
            {imagesPreviewUrls.map(function(imagePreviewUrl, i){
                return <img key={i} src={imagePreviewUrl} />
            })}
  </div>
        </CardBody>
    </Card>
  </div>
    );
   }
  }

   export default OfferMedia;

我最终希望在图像的一角有一个删除按钮（或在图像的下方有一个单独的按钮），以便用户单击该按钮时，它将同时从DOM和后端删除该图像。 。