项目场景：

在实际的开发过程中，我们会遇到一些上传图片的功能，那么如果用React框架来进行开发的话，我们需要用到antd的UI这样一个组件，这个组件我们提供了一个图片开发的一个功能，但是实际上官网提供的这样一个代码是仍需要我们进行一些修改的，否则我们将无法进行一个正常的操作。现在就来看看如何去正常使用这样一个组件

源码显示

antd图片上传组件链接

问题分析：

在这里我们虽然可以进行一个图片的上传，但实际这是一个假操作，因为我们并没有将图片的网址上传网址等一系列的后端接口写在上面，但是它显示成功，实际上这里是用一个Base64的一个编码方式，让我们本地的图片进行一个在页面的显示，并未真正的上传，如果在后台中查看的话，是看不到的

解决方案：

1.修改真实上传的后端网址

<Upload
          name="image"
          action="/manage/img/upload"
          listType="picture-card"
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
        >
          {fileList.length >= 8? null : uploadButton}
        </Upload>

upload的组件中有一个action的属性，这个action实际上和form的实际上是一个意思即我们提交的网址，这里将上传网址进行一个修改
2.修改图片的显示

/*在file状态发生改变时进行调用 */
  handleChange = async({ file,fileList }) => {
      if(fileList.length>1&&fileList[fileList.length-1].status==='done'){
          
          fileList[fileList.length-1].name=fileList[fileList.length-1].response.data.name
          fileList[fileList.length-1].url=fileList[fileList.length-1].response.data.url
      }else if(file.status==='removed'){
        var a=await deleteimg(file.name)
        console.log(a);
        if(a.status===0)
        {   
            message.success('删除成功')}
      }
      this.setState({ fileList })
    console.log(this.state.fileList);};

这样一个函数是在我们进行上传操作的时候进行触发，我们可以在调试工具中看到，实际上他在改变状态的时候触发了三次，也就是有三次输出，我们打开它之后，实际上我们可以看到三次状态，从uploading到done，也就是说，从正在上传到上传完成。但是当上传完成之后，我们将页面中的图片打开，我们发现他的名字和url实际上是上传之前的名字和url，也就是我们用base64编码而形成的一个名字，实际上并不是我们所需要的这样一个名字。

然而在业务中，我们如果需要对图片进行一个操作，例如删除，需要的是上传之后返回的url，不是base64形成url，而真实name和url在response中可以看到，这个时候要对我们的上传过程进行一些操作，以保证url的正确

这里需要指出这个函数中参数1 file，它是指我们当前正在操作的这一个照片，而非filelist是我们操作照片的集合，因此，在上传过程中，File和filelist的最后一个元素，它都指向的是我们正在操作的这样一张照片。但是要明白file和filelist[filelist.length-1]并不是同一个对象,因此无法通过file的改变而改变filelist，需要直接对filelist进行修改，这里通过上传的状态为done后，修改图片的name和url