最近開發輪播圖管理功能，為了使上傳的圖片符合輪播圖的尺寸，在上傳時需要將圖片裁剪成一定的比例后才能上傳。這里記錄一下使用 antd 的 Upload 上傳組件和 react-cropper 實現圖片裁剪上傳功能。

1. 安裝 react-cropper 插件

yarn add react-cropper
// or   npm install react-cropper --save

2. 實現思路

• 在使用 antd 的 Upload 組件上傳時，需要在上傳之前，用FileReader讀取圖片，存下data: URL格式的Base64字符串以表示所讀取文件的內容， 并在 beforeUpload 函數中返回 false, 阻止圖片上傳。

• Cropper 組件接受裁剪框的 長/寬、裁剪區域大小 等參數。

• 用 Cropper 進行截圖后，點擊確定，使用 Cropper 的 getCroppedCanvas方法可以將裁剪區域的數據轉換成canvas數據， 然后調用瀏覽器原生的toBlob方法將canvas數據轉換成blob數據。最后將blob數據發給后端。

3. 具體代碼實現

import React, { PureComponent } from 'react';
import { Button, Form, Row, Col, Drawer, Upload, Icon, Modal, notification } from 'antd';
import 'cropperjs/dist/cropper.css';
import Cropper from 'react-cropper';

export default class RenderDrawer extends PureComponent {
  super(props);
    this.state = {
      previewVisible: false, // 預覽模態框
      previewImage: '', // 預覽圖片地址
      srcCropper: '', // 當前圖片路徑
      selectImgName: '', // 當前文件名稱
      editImageModalVisible: false, // 裁剪模態框
      saveImgLoading: false, // 保存裁剪后的圖片loading
    };

      // Upload 組件圖片上傳前調用的函數
    uploadBefore = file => {
      // 1. 校驗文件大小
      const fileSize = maxFileSize * 1024 * 1024;
      if (file.size > fileSize) {
          file.status = 'error'; // eslint-disable-line
          file.response = `上傳文件大小不能超過: ${fileSize / (1024 * 1024)}MB`; // eslint-disable-line
          return false;
      }

    // 1. FileReader
    // - FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。
    // - 事件 FileReader.onload，在讀取操作完成時觸發
    // - 方法 
    const reader = new FileReader();
    // Image()函數將會創建一個新的HTMLImageElement實例, Image(width, height)
    // 它的功能等價于 document.createElement('img')
    const image = new Image(); 

    reader.readAsDataURL(file); //開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個data: URL格式的Base64字符串以表示所讀取文件的內容。
    // 1. img.onload
    // - img.onload 是回調函數，當img載入完成，就執行這個函數
    // - 當image的src發生改變，瀏覽器就會跑去加載這個src里的資源。這個操作是異步的，就是說，js不會傻傻地在原地等待圖片的加載，而是繼續讀代碼，直到圖片加載完成，觸發onload事件，js才會回來執行onload里面的內容。
    
    // 2. reader.onload
    // - 當 FileReader 讀取文件的方式為  readAsArrayBuffer, readAsBinaryString, readAsDataURL 或者 readAsText 的時候，會觸發一個 load 事件。從而可以使用  FileReader.onload 屬性對該事件進行處理。
    
    reader.onload = e => { // onload 事件在圖片加載完成后立即執行。
      image.src = reader.result;
      image.onload = () => {
        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; // 返回false,阻止文件上傳
  };
}

  // 保存裁剪后的圖片
  handleSaveImg = () => {
    const { dispatch } = this.props;
    const { selectImgName } = this.state;
    if (this.state.srcCropper) {
      this.setState({ saveImgLoading: true });
      // getCroppedCanvas方法可以將裁剪區域的數據轉換成canvas數據
      // 然后調用瀏覽器原生的toBlob方法將canvas數據轉換成blob數據
      this.cropper.getCroppedCanvas().toBlob(blob => {
        const formData = new FormData();
     // 第三個參數為文件名，可選填. formData.append(name, value, filename);vlaue只支持blob string File
        formData.append('file', blob, selectImgName);
        // 之后將blob數據發送至后端
        dispatch({
          type: 'manageMarquee/uploadImage',
          payload: formData,
        }).then(res => {
          if (res && !res.failed) {
            this.setState({
              saveImgLoading: false,
              editImageModalVisible: false,
              fileList: [
                {
                  uid: -1,
                  name: res.fileName,
                  status: 'done',
                  url: res.fileUrl,
                },
              ],
            });
            notification.success({
              message: 上傳成功！
            });
          }
        });
      });
    }
  };

  render() {
       const { srcCropper = '', saveImgLoading = false, fileList = [] } = this.state;
       const fileProps = {
          showDownloadIcon: true,
          showPreviewIcon,
          fileListMaxLength: 1,
          fileList,
          action:  'plugin/address',
          accept: ['image/jpeg', 'image/jpg', 'image/png'],
          headers: {
            Authorization: `Bearer ${cookieToken}`,
           },
          beforeUpload: this.uploadBefore,
          onPreview: this.setState({previewVisible: true});
          onRemove: () => {
            this.setState({
              fileList: [],
            });
        },
      };

  return (
      <>
        // antd 的上傳組件
        <Upload
            listType="picture-card"
            // onPreview={this.handlePreview}
            {...fileProps}
            >
            {fileList.length >= 1 ? null : (
                <div>
                    <Icon type="plus" />
                    <div className="ant-upload-text">Upload</div>
                </div>
            )}
        </Upload>
      
        // 裁剪模態框
        <Modal
          className="upload_cropper_modal"
          visible={this.state.editImageModalVisible}
          width={820}
          onCancel={() => this.setState({ editImageModalVisible: false })}
          title='請選擇剪裁區域'
          footer={[
            <Button type="primary" loading={saveImgLoading} onClick={this.handleSaveImg}>
              確定
            </Button>,
            <Button onClick={() => this.setState({ editImageModalVisible: false })}>
              取消
            </Button>,
          ]}
        >
          <Cropper
            src={this.state.srcCropper || ''} // 圖片路徑，即是base64的值，在Upload上傳的時候獲取到的
            ref={cropper => {
              this.cropper = cropper;
            }}
            preview=".uploadCrop"
            viewMode={1} // 定義cropper的視圖模式
            zoomable={false} // 是否允許放大圖像
            // movable
            guides={false} // 顯示在裁剪框上方的虛線
            background={false} // 是否顯示背景的馬賽克
            rotatable={false} // 是否旋轉
            autoCropArea={1} // 默認值0.8（圖片的80%）。--0-1之間的數值，定義自動剪裁區域的大小
            style={{ width: '100%', height: '400px' }}
            aspectRatio={1152 / 382} // 固定為1:1  可以自己設置比例, 默認情況為自由比例
            // cropBoxResizable={false} // 默認true ,是否允許拖動 改變裁剪框大小
            // cropBoxMovable  // 是否可以拖拽裁剪框 默認true
            dragMode="move" // 拖動模式, 默認crop當鼠標 點擊一處時根據這個點重新生成一個 裁剪框，move可以拖動圖片，none:圖片不能拖動
            center
          />
        </Modal>

        // 預覽模態框
         <Modal visible={previewVisible} footer={null} onCancel={() => {this.setState({previewVisible: false})}}>
          <img alt="" style={{ width: '100%' }} src={previewImage} />
        </Modal>
  </>
)
}
}

4. 實現效果

裁剪框效果圖

整體效果

5. 補充

1. FileReader 方法

參考文章 https://www.cnblogs.com/dongxixi/p/11005607.html

• readAsText 讀取文件的單位是字符，故對于文本文件，只要按規定的編碼方式讀取即可； 而對于媒體文件（圖片、音頻、視頻），其內部組成并不是按字符排列，故采用readAsText讀取，會產生亂碼，同時也不是最理想的讀取文件的方式

  image.png

• readAsDataURL會將文件內容進行base64編碼后輸出

  image.png

• readAsBinaryString
  與readAsText不同的是，readAsBinaryString函數會按字節讀取文件內容。 然而諸如0101的二進制數據只能被機器識別，若想對外可見，還是需要進行一次編碼，而readAsBinaryString的結果就是讀取二進制并編碼后的內容。 盡管readAsBinaryString方法可以按字節讀取文件，但由于讀取后的內容被編碼為字符，大小會受到影響，故不適合直接傳輸，也不推薦使用。 如：測試的圖片文件原大小為6764 字節，而通過readAsBinaryString讀取后，內容被擴充到10092個字節

  image.png

2. FileReader 應用

我們知道，img的src屬性或background的url屬性，可以通過被賦值為圖片網絡地址或base64的方式顯示圖片。 在文件上傳中，我們一般會先將本地文件上傳到服務器，上傳成功后，由后臺返回圖片的網絡地址再在前端顯示。 通過FileReader的readAsDataURL方法，我們可以不經過后臺，直接將本地圖片顯示在頁面上。這樣做可以減少前后端頻繁的交互過程，減少服務器端無用的圖片資源

對于圖片上傳，我們也可以先將圖片轉換為base64進行傳輸，此時由于傳輸的圖片內容就是一段字符串，故上傳接口可以當做普通post接口處理，當圖片傳輸到后臺后，可以在轉換為文件實體存儲。 當然，考慮到base64轉換效率及其本身的大小，本方法還是適合于上傳內容簡單或所占內存較小的文件。

3. 使用FormData對象上傳文件

FormData 接口提供了一種表示表單數據的鍵值對的構造方式，使用append()方法時，可以通過第三個可選參數設置發送請求的頭 Content-Disposition指定文件名。如果不指定文件名（或者不支持該參數時），將使用名字“blob”

4. toDataURL 與 toBlob

toBlob()和toDataURL()方法都是可以的，但個人推薦使用toBlob()方法