React使用react-cropper实现图片裁剪上传

由于实在太多人遇到了问题, 特意提供了一个小demo供大家参考, demo中分别用React的class component形式和Hooks形式实现了两个同样功能的图片裁剪弹窗. 参考代码地址: https://github.com/qhwc2009/copper-learn

你可以把demo工程clone下来到本地, 然后执行$ yarn, 执行完毕后再执行$ yarn start启动项目.

用到的组件

实现图片裁切并上传, 本文用到了:

• html input标签的type=file属性
• react-cropper库

实现步骤

1. 在外面的view页面上, 利用input实现上传的图片暂存

 
    添加图片
    
  

可以把input 隐藏起来
之后, 把通过input上传的文件暂存在state中

handleFileChange = (e) => {
    const file = e.target.files[0]

    if (file) {
      if (file.size <= MAX_FILE_SIZE) {
        
        this.setState({
          selectedImageFile: file,
        }, () => {
          this.setState({
            editImageModalVisible: true,
          })
        })
      } else {
        message.error("文件过大")
      }
    }

    e.target.value = ''
  }

2. 弹出图片裁剪的Modal窗口(我把窗口抽离成了一个独立的组件)

窗口可以自己写, 这里贴出核心代码
这里使用了react-cropper库

弹出弹框来,之后
首先, 要把上一个步骤中储存在state中的文件转化成能读取的URL
通过this.props.uploadedImageFile属性把之前存的图片传进来, 读取, 读取完毕设置上src, 给下一步用

componentDidMount() {
    const fileReader = new FileReader()
    fileReader.onload = (e) => {
      const dataURL = e.target.result
      this.setState({src: dataURL})
    }

    fileReader.readAsDataURL(this.props.uploadedImageFile)
  }

接下来是图片图调用代码
这里要使用上面读取的src

             this.cropper = cropper}
              // Cropper.js options
              viewMode={1}
              zoomable={false}
              aspectRatio={1}  // 这个是设置比例的参数 我这里设置的1:1
              guides={false}
              preview='.cropper-preview'
            />

重要的属性:

1. src - 目标图片的url
2. 其他的options 可以参考这里 (react版与jQuery版options是相通的)
3. cropper-preview 这里指定类名为cropper-preview的div作为预览的窗口

3. 提交裁剪好的图片

handleSubmit = () => {
    if (!this.state.submitting) {
      let url = `/homepage_images`
      // 拿到文件名
      let filename = this.props.uploadedImageFile.name

      message.info("正在上传图片")
      // TODO: 这里可以尝试修改上传图片的尺寸
      this.cropper.getCroppedCanvas().toBlob(async blob => {
        // 创造提交表单数据对象
        const formData = new FormData()
        // 添加要上传的文件
        formData.append('file', blob, filename)
        // 提示开始上传
        this.setState({submitting: true})
        // 上传图片
        const resp = await http.post(url, formData)
        // 拿到服务器返回的数据
        this.props.onUploadedFile(resp.data.data)
        // 提示上传完毕
        this.setState({submitting: false})
        // 关闭弹窗
        this.props.onClose()
      })
    }
  }

4. 实现效果

   
   
   实现效果图