mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
0240d126ec
* feat: add transformFile optionfor transform file before request * feat: bump rc-upload 2.7.0 * feat(Upload): optimize doc
1.1 KiB
1.1 KiB
order | title | ||||
---|---|---|---|---|---|
10 |
|
zh-CN
使用 transformFile
转换上传的文件(例如添加水印)。
en-US
Use transformFile
for transform file before request such as add a watermark.
import { Upload, Button, Icon } from 'antd';
const props = {
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
transformFile(file) {
return new Promise(resolve => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
const canvas = document.createElement('canvas');
const img = document.createElement('img');
img.src = reader.result;
img.onload = () => {
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
ctx.fillStyle = 'red';
ctx.textBaseline = 'middle';
ctx.fillText('Ant Design', 20, 20);
canvas.toBlob(resolve);
};
};
});
},
};
ReactDOM.render(
<div>
<Upload {...props}>
<Button>
<Icon type="upload" /> Upload
</Button>
</Upload>
</div>,
mountNode,
);