最近開發(fā)輪播圖管理功能，為了使上傳的圖片符合輪播圖的尺寸，在上傳時(shí)需要將圖片裁剪成一定的比例后才能上傳。這里記錄一下使用 antd 的 Upload 上傳組件和 react-cropper 實(shí)現(xiàn)圖片裁剪上傳功能。
1. 安裝 react-cropper 插件
yarn add react-cropper
// or npm install react-cropper --save
2. 實(shí)現(xiàn)思路
在使用 antd 的 Upload 組件上傳時(shí)，需要在上傳之前，用FileReader讀取圖片，存下data: URL格式的Base64字符串以表示所讀取文件的內(nèi)容， 并在 beforeUpload 函數(shù)中返回 false, 阻止圖片上傳。
Cropper 組件接受裁剪框的 長/寬、裁剪區(qū)域大小 等參數(shù)。
用 Cropper 進(jìn)行截圖后，點(diǎn)擊確定，使用 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. 具體代碼實(shí)現(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, // 預(yù)覽模態(tài)框
previewImage: '', // 預(yù)覽圖片地址
srcCropper: '', // 當(dāng)前圖片路徑
selectImgName: '', // 當(dāng)前文件名稱
editImageModalVisible: false, // 裁剪模態(tài)框
saveImgLoading: false, // 保存裁剪后的圖片loading
};
// Upload 組件圖片上傳前調(diào)用的函數(shù)
uploadBefore = file => {
// 1. 校驗(yàn)文件大小
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 對(duì)象允許Web應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對(duì)象指定要讀取的文件或數(shù)據(jù)。
// - 事件 FileReader.onload，在讀取操作完成時(shí)觸發(fā)
// - 方法
const reader = new FileReader();
// Image()函數(shù)將會(huì)創(chuàng)建一個(gè)新的HTMLImageElement實(shí)例, Image(width, height)
// 它的功能等價(jià)于 document.createElement('img')
const image = new Image();
reader.readAsDataURL(file); //開始讀取指定的Blob中的內(nèi)容。一旦完成，result屬性中將包含一個(gè)data: URL格式的Base64字符串以表示所讀取文件的內(nèi)容。
// 1. img.onload
// - img.onload 是回調(diào)函數(shù)，當(dāng)img載入完成，就執(zhí)行這個(gè)函數(shù)
// - 當(dāng)image的src發(fā)生改變，瀏覽器就會(huì)跑去加載這個(gè)src里的資源。這個(gè)操作是異步的，就是說，js不會(huì)傻傻地在原地等待圖片的加載，而是繼續(xù)讀代碼，直到圖片加載完成，觸發(fā)onload事件，js才會(huì)回來執(zhí)行onload里面的內(nèi)容。
// 2. reader.onload
// - 當(dāng) FileReader 讀取文件的方式為 readAsArrayBuffer, readAsBinaryString, readAsDataURL 或者 readAsText 的時(shí)候，會(huì)觸發(fā)一個(gè) load 事件。從而可以使用 FileReader.onload 屬性對(duì)該事件進(jìn)行處理。
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();
// 第三個(gè)參數(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ǐng)選擇剪裁區(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上傳的時(shí)候獲取到的
ref={cropper => {
this.cropper = cropper;
}}
preview=".uploadCrop"
viewMode={1} // 定義cropper的視圖模式
zoomable={false} // 是否允許放大圖像
// movable
guides={false} // 顯示在裁剪框上方的虛線
background={false} // 是否顯示背景的馬賽克
rotatable={false} // 是否旋轉(zhuǎn)
autoCropArea={1} // 默認(rèn)值0.8（圖片的80%）。--0-1之間的數(shù)值，定義自動(dòng)剪裁區(qū)域的大小
style={{ width: '100%', height: '400px' }}
aspectRatio={1152 / 382} // 固定為1:1 可以自己設(shè)置比例, 默認(rèn)情況為自由比例
// cropBoxResizable={false} // 默認(rèn)true ,是否允許拖動(dòng) 改變裁剪框大小
// cropBoxMovable // 是否可以拖拽裁剪框 默認(rèn)true
dragMode="move" // 拖動(dòng)模式, 默認(rèn)crop當(dāng)鼠標(biāo) 點(diǎn)擊一處時(shí)根據(jù)這個(gè)點(diǎn)重新生成一個(gè) 裁剪框，move可以拖動(dòng)圖片，none:圖片不能拖動(dòng)
center
/>
</Modal>
// 預(yù)覽模態(tài)框
<Modal visible={previewVisible} footer={null} onCancel={() => {this.setState({previewVisible: false})}}>
<img alt="" style={{ width: '100%' }} src={previewImage} />
</Modal>
</>
)
}
}
4. 實(shí)現(xiàn)效果
5. 補(bǔ)充
1. FileReader 方法
參考文章 https://www.cnblogs.com/dongxixi/p/11005607.html
-
readAsText 讀取文件的單位是字符，故對(duì)于文本文件，只要按規(guī)定的編碼方式讀取即可； 而對(duì)于媒體文件（圖片、音頻、視頻），其內(nèi)部組成并不是按字符排列，故采用readAsText讀取，會(huì)產(chǎn)生亂碼，同時(shí)也不是最理想的讀取文件的方式
image.png
-
readAsDataURL會(huì)將文件內(nèi)容進(jìn)行base64編碼后輸出
image.png -
readAsBinaryString
與readAsText不同的是，readAsBinaryString函數(shù)會(huì)按字節(jié)讀取文件內(nèi)容。 然而諸如0101的二進(jìn)制數(shù)據(jù)只能被機(jī)器識(shí)別，若想對(duì)外可見，還是需要進(jìn)行一次編碼，而readAsBinaryString的結(jié)果就是讀取二進(jìn)制并編碼后的內(nèi)容。 盡管readAsBinaryString方法可以按字節(jié)讀取文件，但由于讀取后的內(nèi)容被編碼為字符，大小會(huì)受到影響，故不適合直接傳輸，也不推薦使用。 如：測試的圖片文件原大小為6764 字節(jié)，而通過readAsBinaryString讀取后，內(nèi)容被擴(kuò)充到10092個(gè)字節(jié)image.png
2. FileReader 應(yīng)用
我們知道，img的src屬性或background的url屬性，可以通過被賦值為圖片網(wǎng)絡(luò)地址或base64的方式顯示圖片。 在文件上傳中，我們一般會(huì)先將本地文件上傳到服務(wù)器，上傳成功后，由后臺(tái)返回圖片的網(wǎng)絡(luò)地址再在前端顯示。 通過FileReader的readAsDataURL方法，我們可以不經(jīng)過后臺(tái)，直接將本地圖片顯示在頁面上。這樣做可以減少前后端頻繁的交互過程，減少服務(wù)器端無用的圖片資源
對(duì)于圖片上傳，我們也可以先將圖片轉(zhuǎn)換為base64進(jìn)行傳輸，此時(shí)由于傳輸?shù)膱D片內(nèi)容就是一段字符串，故上傳接口可以當(dāng)做普通post接口處理，當(dāng)圖片傳輸?shù)胶笈_(tái)后，可以在轉(zhuǎn)換為文件實(shí)體存儲(chǔ)。 當(dāng)然，考慮到base64轉(zhuǎn)換效率及其本身的大小，本方法還是適合于上傳內(nèi)容簡單或所占內(nèi)存較小的文件。
3. 使用FormData對(duì)象上傳文件
FormData 接口提供了一種表示表單數(shù)據(jù)的鍵值對(duì)的構(gòu)造方式，使用append()方法時(shí)，可以通過第三個(gè)可選參數(shù)設(shè)置發(fā)送請(qǐng)求的頭 Content-Disposition指定文件名。如果不指定文件名（或者不支持該參數(shù)時(shí)），將使用名字“blob”
4. toDataURL 與 toBlob
toBlob()和toDataURL()方法都是可以的，但個(gè)人推薦使用toBlob()方法
