Antd Upload 上传文件的使用

该文章介绍了如何在React中使用Upload组件进行文件上传操作。组件配置包括上传名字、地址、方法、最大显示数量以及请求头信息。onChange函数处理上传过程中的状态,如上传中、完成和失败,并显示相应的消息提示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 1.组件使用

  <Upload {...goodProps}>
        <Button icon={<UploadOutlined />}>点击上传</Button>
  </Upload>

2.上传过程

  // 货物文件上传
    const goodProps = {
        name: "file", //上传名字
        action: basicIp + "/sys-file/upload", // 上传地址
        method: "put", // 上传方法
        maxCount: 100, // 页面显示最多条数
        headers: {
            token: sessionStorage.getItem("token"), // 请求头
            checkType: 'ck-token-auth'
        },
        onChange(info) { // 上传/删除的过程函数
            if (info.file.status !== "uploading") { // 正在上传
                console.log(info.file, info.fileList);
                setGoodsFileId(info.fileList); // 保存文件id
            }
            if (info.file.status === "done") { // 上传完成
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === "error") { // 上传失败
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };

### 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]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值