最近開發(fā)輪播圖管理功能，為了使上傳的圖片符合輪播圖的尺寸奖慌，在上傳時需要將圖片裁剪成一定的比例后才能上傳简僧。這里記錄一下使用 antd 的 Upload 上傳組件和 react-cropper 實現(xiàn)圖片裁剪上傳功能岛马。
1. 安裝 react-cropper 插件
yarn add react-cropper
// or npm install react-cropper --save
2. 實現(xiàn)思路
在使用 antd 的 Upload 組件上傳時，需要在上傳之前伞矩，用FileReader讀取圖片乃坤，存下data: URL格式的Base64字符串以表示所讀取文件的內(nèi)容， 并在 beforeUpload 函數(shù)中返回 false, 阻止圖片上傳狱杰。
Cropper 組件接受裁剪框的 長/寬仿畸、裁剪區(qū)域大小 等參數(shù)朗和。
用 Cropper 進行截圖后例隆，點擊確定，使用 Cropper 的 getCroppedCanvas方法可以將裁剪區(qū)域的數(shù)據(jù)轉(zhuǎn)換成canvas數(shù)據(jù)镰禾， 然后調(diào)用瀏覽器原生的toBlob方法將canvas數(shù)據(jù)轉(zhuǎn)換成blob數(shù)據(jù)吴侦。最后將blob數(shù)據(jù)發(fā)給后端坞古。
3. 具體代碼實現(xiàn)
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, // 預覽模態(tài)框
previewImage: '', // 預覽圖片地址
srcCropper: '', // 當前圖片路徑
selectImgName: '', // 當前文件名稱
editImageModalVisible: false, // 裁剪模態(tài)框
saveImgLoading: false, // 保存裁剪后的圖片loading
};
// Upload 組件圖片上傳前調(diào)用的函數(shù)
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應用程序異步讀取存儲在用戶計算機上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容织堂，使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)易阳。
// - 事件 FileReader.onload吃粒，在讀取操作完成時觸發(fā)
// - 方法
const reader = new FileReader();
// Image()函數(shù)將會創(chuàng)建一個新的HTMLImageElement實例, Image(width, height)
// 它的功能等價于 document.createElement('img')
const image = new Image();
reader.readAsDataURL(file); //開始讀取指定的Blob中的內(nèi)容徐勃。一旦完成僻肖，result屬性中將包含一個data: URL格式的Base64字符串以表示所讀取文件的內(nèi)容。
// 1. img.onload
// - img.onload 是回調(diào)函數(shù)劝堪，當img載入完成幅聘，就執(zhí)行這個函數(shù)
// - 當image的src發(fā)生改變窃植，瀏覽器就會跑去加載這個src里的資源巷怜。這個操作是異步的延塑，就是說，js不會傻傻地在原地等待圖片的加載侥涵，而是繼續(xù)讀代碼宋雏，直到圖片加載完成磨总，觸發(fā)onload事件，js才會回來執(zhí)行onload里面的內(nèi)容娶牌。
// 2. reader.onload
// - 當 FileReader 讀取文件的方式為 readAsArrayBuffer, readAsBinaryString, readAsDataURL 或者 readAsText 的時候诗良，會觸發(fā)一個 load 事件累榜。從而可以使用 FileReader.onload 屬性對該事件進行處理灵嫌。
reader.onload = e => { // onload 事件在圖片加載完成后立即執(zhí)行寿羞。
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方法可以將裁剪區(qū)域的數(shù)據(jù)轉(zhuǎn)換成canvas數(shù)據(jù)
// 然后調(diào)用瀏覽器原生的toBlob方法將canvas數(shù)據(jù)轉(zhuǎn)換成blob數(shù)據(jù)
this.cropper.getCroppedCanvas().toBlob(blob => {
const formData = new FormData();
// 第三個參數(shù)為文件名虱岂，可選填. formData.append(name, value, filename);vlaue只支持blob string File
formData.append('file', blob, selectImgName);
// 之后將blob數(shù)據(jù)發(fā)送至后端
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>
// 裁剪模態(tài)框
<Modal
className="upload_cropper_modal"
visible={this.state.editImageModalVisible}
width={820}
onCancel={() => this.setState({ editImageModalVisible: false })}
title='請選擇剪裁區(qū)域'
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} // 是否旋轉(zhuǎn)
autoCropArea={1} // 默認值0.8（圖片的80%）。--0-1之間的數(shù)值试溯，定義自動剪裁區(qū)域的大小
style={{ width: '100%', height: '400px' }}
aspectRatio={1152 / 382} // 固定為1:1 可以自己設置比例, 默認情況為自由比例
// cropBoxResizable={false} // 默認true ,是否允許拖動 改變裁剪框大小
// cropBoxMovable // 是否可以拖拽裁剪框 默認true
dragMode="move" // 拖動模式, 默認crop當鼠標 點擊一處時根據(jù)這個點重新生成一個 裁剪框蔑滓，move可以拖動圖片，none:圖片不能拖動
center
/>
</Modal>
// 預覽模態(tài)框
<Modal visible={previewVisible} footer={null} onCancel={() => {this.setState({previewVisible: false})}}>
<img alt="" style={{ width: '100%' }} src={previewImage} />
</Modal>
</>
)
}
}
4. 實現(xiàn)效果
5. 補充
1. FileReader 方法
參考文章 https://www.cnblogs.com/dongxixi/p/11005607.html
-
readAsText 讀取文件的單位是字符遇绞，故對于文本文件，只要按規(guī)定的編碼方式讀取即可摹闽； 而對于媒體文件（圖片蹄咖、音頻、視頻）付鹿，其內(nèi)部組成并不是按字符排列澜汤，故采用readAsText讀取，會產(chǎn)生亂碼倘屹，同時也不是最理想的讀取文件的方式
image.png
-
readAsDataURL會將文件內(nèi)容進行base64編碼后輸出
image.png -
readAsBinaryString
與readAsText不同的是银亲，readAsBinaryString函數(shù)會按字節(jié)讀取文件內(nèi)容。 然而諸如0101的二進制數(shù)據(jù)只能被機器識別纽匙，若想對外可見务蝠，還是需要進行一次編碼，而readAsBinaryString的結(jié)果就是讀取二進制并編碼后的內(nèi)容烛缔。 盡管readAsBinaryString方法可以按字節(jié)讀取文件馏段，但由于讀取后的內(nèi)容被編碼為字符，大小會受到影響践瓷，故不適合直接傳輸院喜，也不推薦使用。 如：測試的圖片文件原大小為6764 字節(jié)晕翠，而通過readAsBinaryString讀取后喷舀，內(nèi)容被擴充到10092個字節(jié)image.png
2. FileReader 應用
我們知道，img的src屬性或background的url屬性淋肾，可以通過被賦值為圖片網(wǎng)絡地址或base64的方式顯示圖片硫麻。 在文件上傳中，我們一般會先將本地文件上傳到服務器樊卓，上傳成功后拿愧，由后臺返回圖片的網(wǎng)絡地址再在前端顯示。 通過FileReader的readAsDataURL方法碌尔，我們可以不經(jīng)過后臺浇辜，直接將本地圖片顯示在頁面上券敌。這樣做可以減少前后端頻繁的交互過程，減少服務器端無用的圖片資源
對于圖片上傳柳洋，我們也可以先將圖片轉(zhuǎn)換為base64進行傳輸待诅，此時由于傳輸?shù)膱D片內(nèi)容就是一段字符串，故上傳接口可以當做普通post接口處理熊镣，當圖片傳輸?shù)胶笈_后咱士，可以在轉(zhuǎn)換為文件實體存儲。 當然轧钓，考慮到base64轉(zhuǎn)換效率及其本身的大小，本方法還是適合于上傳內(nèi)容簡單或所占內(nèi)存較小的文件锐膜。
3. 使用FormData對象上傳文件
FormData 接口提供了一種表示表單數(shù)據(jù)的鍵值對的構(gòu)造方式毕箍，使用append()方法時，可以通過第三個可選參數(shù)設置發(fā)送請求的頭 Content-Disposition指定文件名道盏。如果不指定文件名（或者不支持該參數(shù)時）而柑，將使用名字“blob”
4. toDataURL 與 toBlob
toBlob()和toDataURL()方法都是可以的，但個人推薦使用toBlob()方法
