mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-03 08:19:37 +08:00
68 lines
1.7 KiB
Markdown
68 lines
1.7 KiB
Markdown
---
|
|
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.
|
|
|
|
```tsx
|
|
import { Upload } from 'antd';
|
|
import ImgCrop from 'antd-img-crop';
|
|
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
|
|
import React, { useState } from 'react';
|
|
|
|
const App: React.FC = () => {
|
|
const [fileList, setFileList] = useState<UploadFile[]>([
|
|
{
|
|
uid: '-1',
|
|
name: 'image.png',
|
|
status: 'done',
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
},
|
|
]);
|
|
|
|
const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
|
|
setFileList(newFileList);
|
|
};
|
|
|
|
const onPreview = async (file: UploadFile) => {
|
|
let src = file.url as string;
|
|
if (!src) {
|
|
src = await new Promise(resolve => {
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(file.originFileObj as RcFile);
|
|
reader.onload = () => resolve(reader.result as string);
|
|
});
|
|
}
|
|
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>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
```
|