2020-05-18 19:22:45 +08:00
|
|
|
---
|
|
|
|
order: 14
|
|
|
|
title:
|
|
|
|
zh-CN: 上传前裁切图片
|
|
|
|
en-US: Crop image before uploading
|
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
|
|
|
配合 [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) 实现上传前裁切图片。
|
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
|
|
|
Use [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) to crop image before uploading.
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
import { Upload } from 'antd';
|
|
|
|
import ImgCrop from 'antd-img-crop';
|
|
|
|
|
|
|
|
const Demo = () => {
|
|
|
|
const [fileList, setFileList] = useState([
|
|
|
|
{
|
|
|
|
uid: '-1',
|
|
|
|
name: 'image.png',
|
|
|
|
status: 'done',
|
|
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
|
|
},
|
|
|
|
]);
|
|
|
|
|
|
|
|
const onChange = ({ fileList: newFileList }) => {
|
|
|
|
setFileList(newFileList);
|
|
|
|
};
|
|
|
|
|
|
|
|
const onPreview = async file => {
|
|
|
|
let src = file.url;
|
|
|
|
if (!src) {
|
|
|
|
src = await new Promise(resolve => {
|
|
|
|
const reader = new FileReader();
|
|
|
|
reader.readAsDataURL(file.originFileObj);
|
|
|
|
reader.onload = () => resolve(reader.result);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
const image = new Image();
|
|
|
|
image.src = src;
|
|
|
|
const imgWindow = window.open(src);
|
|
|
|
imgWindow.document.write(image.outerHTML);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<ImgCrop rotate>
|
|
|
|
<Upload
|
|
|
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
|
|
|
listType="picture-card"
|
|
|
|
fileList={fileList}
|
|
|
|
onChange={onChange}
|
|
|
|
onPreview={onPreview}
|
|
|
|
>
|
|
|
|
{fileList.length < 5 && '+ Upload'}
|
|
|
|
</Upload>
|
|
|
|
</ImgCrop>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-04-15 16:20:56 +08:00
|
|
|
export default Demo;
|
2020-05-18 19:22:45 +08:00
|
|
|
```
|