React-cropper结合Antd Upload组件编辑图片以及上传相关问题

Question

React Umi.js
使用到的组件：Antd:Modal(弹窗) Upload(上传) Cropper.js
1.Upload组件中有上传后提供预览的例子

流程：点击上传---选择文件---编辑---保存---上传服务器---等待父组件表单填写完之后再上传一遍（不同api）

思路：父组件是一个表单，其中一项是上传头像（子组件），点击上传图片类型以及各种条件符合 进行编辑
点击保存子传父到大表单上，因为大表单上有一个上传按钮。

问题1：我是否要让编辑后的图片暂存到父组件而不是直接上传，但是后端又有一个独立的API来提供
上传图片，然后等父组件这个表单填写完毕后点击添加？
问题2：上传到底是要交给Modal的保存按钮还是Upload组件中的beforeUpload钩子函数

// Upload上传之前函数

  beforeUpload(file) {
    const isLt10M = file.size / 1024 / 1024 < 6;
    if (!isLt10M) { //添加文件限制
      // message.error('文件大小不能超过6M');
      return false;
    }
    let reader=new FileReader();
    reader.readAsDataURL(file); //开始读取文件
    // 因为读取文件需要时间,所以要在回调函数中使用读取的结果
    reader.onload = (e) => {
      console.log(file);
      this.setState({
        srcCropper: e.target.result,//cropper的图片路径
        selectImgName: file.name, //文件名称
        selectImgSize: (file.size / 1024 / 1024), //文件大小
        selectImgSuffix: file.type.split("/")[1], //文件类型
        editImageModalVisible: true, //打开控制裁剪弹窗的变量，为true即弹窗
      });
    };
    return false;
  }
//保存按钮
saveImg = () => {
    let {srcCropper}=this.state;
      // 拿到文件名
      let filename = this.state.selectImgName;
      // 这里可以尝试修改上传图片的尺寸
      this.refs.cropper.getCroppedCanvas().toBlob(async blob => {
        // 创造提交表单数据对象
        const formData = new FormData();
        // 添加要上传的文件
        formData.append('file', blob, filename);
        // 提示开始上传
        try {
          // 接口
          let res = await upload(srcCropper, formData);
          if(res.errCode === 0) {
            // 上传成功
            //子传父
            this.props.getImg();
            message.success('上传成功')
          } else {
            // 上传失败
            message.error('上传失败')
          }
        } catch(err) {
          console.log(err);
        }
        this.handleOnCancel()
      },"image/jpeg")
      };
     
     

Answer 1

根据你的描述，我猜想正常的业务逻辑应该是这样的：
点击图片上传，这时候会调用图片上传接口把图片提交到服务器，
完成后服务器会返回一个可以访问这个图片的url，
你应该把这个url传给父组件的表单。
这时候点表单的提交，提交的应该是这个图片的url，而不是重新上传文件。
不知道我的理解有没有错