--- order: 10 title: zh-CN: 上传前转换文件 en-US: Transform file before request --- ## zh-CN 使用 `transformFile` 转换上传的文件(例如添加水印)。 ## en-US Use `transformFile` for transform file before request such as add a watermark. ```jsx 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(
, mountNode, ); ```