Antd Upload 上传文件的使用

xiaohuichonga

已于 2023-04-14 17:35:24 修改

阅读量949

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端前端框架 anti-design-vue

于 2023-04-14 17:23:27 首次发布

本文链接：https://blog.youkuaiyun.com/xiaohuichonga/article/details/130158478

该文章介绍了如何在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.`);
            }
        },
    };