antd使用upload控件，上传时一直处于loading状态

最新推荐文章于 2024-08-13 16:51:37 发布

鹭岛君

最新推荐文章于 2024-08-13 16:51:37 发布

阅读量4.6k

点赞数 1

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/richard123ok/article/details/107631149

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文件处于如图所示的状态
在这里插入图片描述
解决办法：
在upload的onChange方法中加入this.forceUpdate()，例子如下

onChange = ({fileList}) => {
  this.setState({
    fileList: fileList
  }, () => {
    this.forceUpdate()
  });
};

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

鹭岛君

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【antd 的Upload组件onChange方法只执行一次file.status===‘uploading‘，走不到‘done‘的原因和解决方法】

鸭绒的博客

09-23

2901

111

记录antd表单组件的Form.List的一个使用场景如何自定义一个新的Form表单组件

nihaoljs的博客

07-12

2995

antd 表单

2 条评论您还未登录，请先登录后发表或查看评论

解决antd upload自定义上传customRequest，上传时一直loading加载的问题

weixin_43422861的博客

11-30

2104

查看customRequest参数。

antd upload 实现自定义文件上传

最新发布

m0_67416102的博客

08-13

747

需要注意的是，在文件进行回显时，要进行setFieldsValue，和设置FormItem的defaultFileList才行。以下为defaultFileList的格式，返回的数据将存储在response中。实现进度条，和存储数据。

antd Upload组件上传状态一直处于uploading

程序员二胖

01-13

6130

antd Upload组件上传状态一直处于uploading 对于受控模式，需要在 onChange 中始终 setState fileList，保证所有状态同步到 Upload 内 import { UploadFile, UploadProps } from 'antd/es/upload/interface'; ... const [fileList, setFileList] = useState<UploadFile[]>([]); const uploadProps: Uplo

Ant Design ＜a-upload＞上传时只有Uploading状态，无法获取服务器返回的数据

唐诺

02-20

965

法上传，需要去掉loading属性即可。中的loading属性导致。

Antd-Design-Vue 文件上传Upload 上传后status一直是Uploading状态，无法获取服务器返回的数据

萧萧凌云的博客

12-22

4542

Antd-Design-Vue 自定义上传行为解决一直uploading问题。很丝滑，上传图片，删除图片，预览图片，组件参数提交。

Antd-Upload组件设置fileList属性时onChnage只执行到“uploading“状态引发的一些问题的解决方案

weixin_42159569的博客

12-14

2488

需求：文件上传失败时不需要回显。思路：添加fileList属性，绑定一个列表，上传成功的文件才加入列表中 ... const [ displayFileList, setDisplayFileList ] = useState<any[]>([]); ... <Upload action="xxx" accept=".xls*, .csv" ... fileList={displayFileList} ... onChang.

vue ，使用antdesign中上传图片upload ，状态一直为uploading，踩坑

weixin_42630109的博客

07-02

2321

使用单文件上传时@change事件会至少触发两次，一次file.status=uploading，最后一次要么是done或者error，最后一行是关键，无论file上传状态如何，filelist一定要同步，还有不能用return，要不然就没有回调了。上传成功了，也拿到了后台返回的数据，但是onchang监听的时候，file的状态一直是uploading。但是如果是需要上传显示一组文件，则需要保存文件的状态会给一个属性。多文件上传，上传的时候绑定fileList回显。：onchange 只触发了一次。

【Umi+Antd+Ts实战】新增商品弹框组件【V1.0】

Milk~每天分享一点点，技术进步一点点

10-13

1156

新增商品弹框组件先看效果 1.点击+符号，弹出新增商品组件路由配置可以参考下面博客 https://blog.csdn.net/weixin_43352901/article/details/108536112 2.新增商品弹框内容文件目录文件解析 const.ts export const formLayout = { labelCol: { sm: { span: 6 }, xs: { span: 28 } }, wrapperCol: { sm:

React学习day15--antd组件Dropdown下拉菜单、导航栏、分页

weixin_46758732的博客

06-28

2419

下拉菜单 https://ant.design/components/dropdown-cn/ import React, {Component} from 'react'; import {Menu,Dropdown} from "antd"; import 'antd/dist/antd.css'; import './index.css'; import {DownOutlined} from '@ant-design/icons' const menu = ( <Menu>

use-force-update-hook:React挂钩，允许在功能组件中使用forceUpdate（）

03-21

使用力更新挂钩 React钩子将给功能组件。安装 npm i --save-dev use-force-update-hook 用法该软件包导出2个钩子： useForceUpdate和useForceUpdateWithCallback 。通常，您应该使用useForceUpdate钩子： import React from 'react' import ReactDOM from 'react-dom' import { useForceUpdate } from 'use-force-update-hook' function MyAwesomeComponent ( ) { const forceUpdate = useForceUpdate ( ) console . log ( 'render' ) return ( < div> <

【MinIO对象存储】- Angular + ng-zorro实现文件上传

11-26

688

后端API接口项目，请参考项目，使用springboot + minio-client框架实现存储服务。前端使用Angular + ng-zorro实现，项目源码在这里。

上传加载loading

让世界更美好！

08-13

2710

在上传歌曲的时候, 我们发现屏幕上只有左下角有个文字提示: 文件正在上传, 文件上传成功. 这对于用户来说, 看不看得见是一个问题, 更重要的是影响用户体验, 用户还不一定知道是否上传了呢. 因此我们需要做一件事情. 那就是在上传歌曲的时候, 加载一个loading动画, 让用户理解正在上传. loading的基本结构为 &amp;lt;style&amp;gt; @keyframes loa...

文件在上传的时候出现加载loading条

qToHoTp的博客

06-22

2010

upload.render({ elem: '#id' ,url: '/api/upload/' ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。 layer.load(); //上传loading } ,done: function(res, index, upload){ layer.closeAll('loading'); //关闭loading } ,error: function(ind

上传文件，页面loading显示文件上传进度

程序员一枚，仅记录工作中的难点

03-05

533

做项目时，弹窗上传文件时，上传动作无法停止，需要加一个蒙层，并显示文件上传进度，效果如图。

Antd 的 Upload 上传组件 uploading 状态踩坑记

Memory、的博客

08-26

9676

说明：在使用Antd 的 Upload 组件的onChange()方法中，打印fileList 中的文件状态status 一直是 uploading,无法拿到上传文件后服务端响应的内容，且组件下方不显示文件列表问题，以下是解决方法： const Dragger = Upload.Dragger; constructor(props) { super(props); this.state = { fileList: [], }; .

前端 Ant Design Pro 加loading

qq_39314683的博客

11-09

2588

1.首先给模块加一层<Spin></Spin> return ( <Spin spinning={loading} wrapperClassName={styles.mySpinning}> <div className={styles.main}> <TitleBar {...params} /> <div id='carbonPea

【Antd Design Upload BUG】 antd Upload 上传时只有Uploading状态，无法获取服务器返回的数据

qq_44933075的博客

08-22

5887

最近在对接antd Upload时候想获取服务器返回的数据图片，发现无法获取返回值，点击@chang事件的时候只触发Uploading 一个状态，无法拿到服务器返回的数据

怎么使用antd组件upload上传文件给后端

07-08

要使用 antd 组件 Upload 来上传文件给后端，你需要进行以下步骤： 1. 安装 antd 组件库： ``` npm install antd ``` 2. 在你的代码中引入所需的组件： ```jsx import { Upload, Button } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; ``` 3. 创建一个状态来存储上传文件的列表： ```jsx const [fileList, setFileList] = useState([]); ``` 4. 创建一个函数来处理文件上传： ```jsx const handleUpload = () => { const formData = new FormData(); fileList.forEach(file => { formData.append('files', file); }); // 发送上传请求给后端 // 使用 axios 或其他 HTTP 库发送 POST 请求 // 例如： // axios.post('/api/upload', formData) // .then(response => { // // 处理上传成功后的逻辑 // }) // .catch(error => { // // 处理上传失败后的逻辑 // }); }; ``` 5. 在渲染的 JSX 中使用 Upload 组件： ```jsx <Upload fileList={fileList} onChange={({ fileList }) => setFileList(fileList)} > <Button icon={<UploadOutlined />}>选择文件</Button> </Upload> <Button onClick={handleUpload}>上传</Button> ``` 上述代码中，我们使用了 antd 的 Upload 组件来创建一个文件上传的区域。通过设置 fileList 属性和 onChange 事件来管理上传的文件列表。当用户选择文件后，fileList 状态会自动更新。最后，我们创建了一个按钮来触发 handleUpload 函数，该函数会将文件列表中的文件转换为 FormData，并发送 POST 请求给后端进行文件上传。请注意，此处的上传逻辑仅为示例，具体的后端处理逻辑需要根据你的后端框架来实现。