ANTD upload组件上传大图片裁剪为两个小图片（方便图片加载）

思路说明

1、antd-img-crop插件

刚开始，看antd文档想用推荐的antd-img-crop插件来实现。优点：代码简单明了，没有神马难度，可以任意裁剪图片；效果与缺点：不符合目标，我只想自动把长图片裁切为几张小图片并上传，不需要用户自定义，自定义容易出现问题，gg。

2、blob数据流直接一分为2:

结果：切割后的数据流前半部分可以显示，后半部分无法正常显示，估计是暴力裁剪有的东西没有剪上，有大佬了解的可以说一下。

3、canvas:

效果：没啥问题，能实现，就是数据转换有一点点麻烦。

来吧，展示：

代码：

上传组件（照抄自定义上传）：

<Upload {...propsRule}>
                     <Button type="primary">选择文件</Button>
                   </Upload>
                   <div>
                     <Button
                       type="primary"
                       onClick={this.handleUpload.bind(this)}
                       disabled={fileList.length === 0}
                       loading={uploading}
                       style={{
                         marginTop: 16
                       }}
                     >
                    点击上传
                     </Button>
                   </div>

上传组件属性（propsRule）：

dataURItoBlob 方法在百度搜到的，感谢原作者！需要用到的可以去搜一下，不同站的文章这里就不放链接了

const propsRule = {
     accept: 'image/*',
     maxCount: 1,
     beforeUpload: async (file) => {
       if (file.size > 512 * 512) {
         file.status = 'error'
         file.response = '上传文件大小不能超过500kb'
         return false
       }
       try {
         const data = await this.handleFile(file)
         // 创建新的 Blob 对象
         const blob1 = this.dataURItoBlob(data[0])
         const blob2 = this.dataURItoBlob(data[1])
         // 你可以使用Blob对象进行进一步的处理，例如将其转换为File对象
         const file1 = new File([blob1], 'img1.png', { type: 'image/png' })
         const file2 = new File([blob2], 'img2.png', { type: 'image/png' })
         //  const url1 = URL.createObjectURL(file1)
         this.setState({ fileList: [file1, file2] })
         return false
       } catch (error) {
         console.error('Error:', error)
       }
     },
     fileList
   }

切割方法：

 handleFile = async (file) => {
    return new Promise((resolve, reject) => {
      const imgBlob = new Image()
      imgBlob.src = URL.createObjectURL(file)
      imgBlob.onload = function() {
        const canvas = document.createElement('canvas')
        canvas.width = imgBlob.width
        canvas.height = imgBlob.height / 2
        const ctx = canvas.getContext('2d')
        // 切割图像
        ctx.drawImage(imgBlob, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height)
        const imageData1 = ctx.getImageData(0, 0, canvas.width, canvas.height)
        const img1 = canvas.toDataURL(imageData1)
        ctx.clearRect(0, 0, canvas.width, canvas.height)

        // 切割图像
        ctx.drawImage(imgBlob, 0, imgBlob.height / 2, canvas.width, imgBlob.height / 2, 0, 0, canvas.width, canvas.height)
        const imageData2 = ctx.getImageData(0, canvas.height / 2, canvas.width, canvas.height / 2)
        const img2 = canvas.toDataURL(imageData2)

        // 数据处理完成后，调用 resolve 函数
        resolve([img1, img2])
      }
      imgBlob.onerror = function(error) {
        reject(error)
      }
    })
  }

上传方法：（略，随便一个post请求即可）