###
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) => handleCustom
Upload(options)} />
```
其中 `handleCustom
Upload` 是
开发者实现的具体
上传逻辑[^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 sliceAnd
Upload(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]。
---
###
当使用antd的上传组件在本地运行无误，但在线上环境遇到405错误时，问题可能出在ng配置阻止了POST请求静态资源。解决方法包括通过beforeUpload阻止自动上传并手动处理，以及在onchange事件中进行调整以适应不再自动上传的情况。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
