mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 17:19:11 +08:00
6776bb8916
* docs: update demo * chore: add script * test: fix demo test * docs: convert demos * chore: move script * test: remove react-dom import * chore: update deps * docs: update riddle js * test: fix image test * docs: fix riddle demo
1.3 KiB
1.3 KiB
order | title | ||||
---|---|---|---|---|---|
10 |
|
zh-CN
使用 beforeUpload
转换上传的文件(例如添加水印)。
en-US
Use beforeUpload
for transform file before request such as add a watermark.
import { Upload, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
const props = {
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
listType: 'picture',
beforeUpload(file) {
return new Promise(resolve => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
const img = document.createElement('img');
img.src = reader.result;
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
ctx.fillStyle = 'red';
ctx.textBaseline = 'middle';
ctx.font = '33px Arial';
ctx.fillText('Ant Design', 20, 20);
canvas.toBlob(resolve);
};
};
});
},
};
export default () => (
<Upload {...props}>
<Button icon={<UploadOutlined />}>Upload</Button>
</Upload>
);