antd upload文件上传

### antd Upload 文件上传组件使用指南 #### 基本概念 `antd` 提供了一个强大的 `Upload` 组件，用于处理文件上传场景。该组件支持多种高级功能，如拖拽上传、文件列表展示、自定义请求逻辑等[^4]。 #### 安装依赖 在使用 `antd` 的 `Upload` 组件之前，需先安装 `antd` 库： ```bash npm install antd ``` #### 基础用法 以下是 `Upload` 组件的基础配置示例： ```jsx import React from 'react'; import { Button, message } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; import { Upload } from 'antd'; const props = { name: 'file', action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', // 替换为实际接口地址 headers: { authorization: 'authorization-text', }, onChange(info) { const status = info.file.status; if (status === 'done') { message.success(`${info.file.name} 文件上传成功`); } else if (status === 'error') { message.error(`${info.file.name} 文件上传失败.`); } }, }; function App() { return ( <Upload {...props}> <Button icon={<UploadOutlined />}>点击上传</Button> </Upload> ); } export default App; ``` 此代码展示了如何设置基本的文件上传行为，并通过回调函数捕获上传状态变化[^4]。 #### 高级特性 ##### 自定义上传逻辑 如果需要完全掌控上传过程，可以禁用默认的行为并提供一个自定义的上传函数： ```jsx <Upload customRequest={(options) => handleCustomUpload(options)} /> ``` 其中 `handleCustomUpload` 是开发者实现的具体上传逻辑[^4]。 ##### 支持图片裁剪 借助第三方插件 `antd-img-crop` 可以轻松集成图片裁剪功能[^4]: ```jsx import React from 'react'; import ImgCrop from 'antd-img-crop'; import { Upload } from 'antd'; const App = () => ( <ImgCrop rotate> <Upload action="https://jsonplaceholder.typicode.com/posts/" listType="picture-card"> <div>点击上传</div> </Upload> </ImgCrop> ); export default App; ``` ##### 大文件分片上传 虽然 `antd` 默认不直接支持大文件切片上传，但可以通过扩展其 API 来完成这一需求。例如结合 Axios 或其他工具手动分割文件后再逐片发送至服务端[^1]: ```javascript async function sliceAndUpload(file) { const chunkSize = 1 * 1024 * 1024; // 每次上传 1MB 数据 let chunks = []; for (let i = 0; i < file.size; i += chunkSize) { const end = Math.min(i + chunkSize, file.size); chunks.push(file.slice(i, end)); } await Promise.all(chunks.map(chunk => axios.post('/upload-chunk', chunk))); } ``` 以上代码片段实现了简单的文件切割与异步传输流程[^1]。 #### 错误处理 当遇到网络异常或其他问题时，可通过监听 `onError` 方法获取具体错误信息[^4]。 --- ###