解决antd中upload上传一直有提示问题

最新推荐文章于 2023-12-22 16:31:21 发布
最新推荐文章于 2023-12-22 16:31:21 发布
阅读量707 收藏
点赞数
分类专栏： 项目踩坑 文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44989721/article/details/131898170
版权

一、问题概述

antd框架upload上传，一般校验规则写在form表单的rules对象里，当upload上传为必填时，不上传会出现提示语，上传之后也会出现提示语。如图所示：
在这里插入图片描述

二、解决方案

目前解决方案是验证的时候，监听upload的v-model:file-list的值此处为fileList
在这里插入图片描述
修改后的验证代码为：
在这里插入图片描述
这样监听fileList的length，就能避免上传之后还显示验证的提示语。

sunmeng666
关注
专栏目录
antdvue upload组件的customRequest自定义上传事件一直uploading处理方法
峰会路转的博客
11-03 3551
antdvue里面用到upload组件，本以为很简单的，还有不少的坑要注意 解决方案 直接删掉了失败的文件，也没有显示文件上传中的占位 试了很久，上传报错，但是文件依然有回显，这就很纳闷了~~~ 明明试失败，就不应该有回显 解决方案 这样就实现了上传超出大小限制，既不调用后端接口，也不回显该图片的效果
antd上传文件到服务器,Antd 4 Upload 图片上传（前端篇）
weixin_36074800的博客
07-30 5014
Antd 4 Upload 图片上传(前端篇)简介记录一下第一次使用 Ant Design 的 Upload 组件上传图片到后端服务器的基本流程和思路。前端使用了 React + Antd ，后端使用 Nodejs 的Express 。主要介绍 Antd 中 Upload 组件的照片墙，也就是上传多张图片。Ant Design 官方 Upload 教程地址：Antd Upload 组件实现1. 简...
antd组件Upload实现自己上传的实现示例
10-17
主要介绍了antd组件Upload实现自己上传的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
antD a-upload 上传前添加确认提示框
m0_59324006的博客
01-19 3281
upload在上传前需要二次确认选择的内容，防止出错，如果拒绝就不执行上传的操作，确认信息无误才继续执行上传内容。 1.html上添加属性 :beforeUpload="beforeUpload" // 加属性 :beforeUpload="beforeUpload" <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
antd Upload组件上传状态一直处于uploading
程序员二胖
01-13 6041
antd Upload组件上传状态一直处于uploading 对于受控模式，需要在 onChange 中始终 setState fileList，保证所有状态同步到 Upload 内 import { UploadFile, UploadProps } from 'antd/es/upload/interface'; ... const [fileList, setFileList] = useState<UploadFile[]>([]); const uploadProps: Uplo
antd upload一直处于uploading状态
董小姐不懂你的博客
12-05 6030
antd版本太低导致 解决方案： this.setState（fileList） 不要放在 if 语句中，要保证一直在更新 changeImg = fileList => { let imgUrl; if (fileList[0] && fileList[0].status == "done" && fileList[0].response....
Antd-Design-Vue 文件上传Upload 上传后status一直是Uploading状态，无法获取服务器返回的数据
最新发布
萧萧凌云的博客
12-22 4049
Antd-Design-Vue 自定义上传行为 解决一直uploading问题。 很丝滑，上传图片，删除图片，预览图片，组件参数提交。
antd Upload 文件上传的示例代码
10-17
antd的Upload组件为开发者提供了便捷的文件上传解决方案。无论是使用默认上传机制还是通过`customRequest`来自定义上传行为，antd Upload都能满足日常开发中的文件上传需求。需要注意的是，文中提到的示例代码需要...
antd 上传进度_antd组件Upload实现自己上传的实现示例
weixin_36102930的博客
12-28 1051
前言在实现图片上传时，可能需要用到Upload，但是它默认的上传方式是加入图片后直接上传，如果要实现最后再一次性上传，需要自定义内容。//添加按钮的样式const uploadButton = (Upload);//样式className={styles['override-ant-btn']}//陈列样式，现在是卡片式listType="picture-card"//再图片上传到页面后执行的函数...
Antd 的 Upload 上传组件 uploading 状态踩坑记
Memory、的博客
08-26 9620
说明：在使用Antd 的 Upload 组件 的onChange()方法中，打印fileList 中的文件状态status 一直是 uploading,无法拿到上传文件后服务端响应的内容，且组件下方不显示文件列表问题，以下是解决方法： const Dragger = Upload.Dragger; constructor(props) { super(props); this.state = { fileList: [], }; .
antd 表单中必填项 Upload 上传组件使用
agua001的博客
03-02 4323
1、需求，在表单中，有上传的必填项，如图： 2、遇到的第一坑就是，上传成功但图标一直在上传状态（没加 file-list 属性） 3、解决：添加 :file-list=“fileList”，完整代码： // 子组件 html : <a-form layout="vertical" :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" > <a-row :gutter="5"&g
iview表单校验上传图片成功后，提示文字不消失
lianwenxiu的博客
05-30 5031
最近做的项目中有直播和课程后台管理模块，遇到一个bug，其中有个功能是上传直播图片和直播附件，而且都是必填项。用的框架是vue+iview，用Form表单验证，对必填项做校验。当不填写时点提交会出现红色提示文字，但是当图片上传成功后，提示文字并不会消失。尝试在自定义校验中进行判断如果图片变量有数据就不提示，但是不管用。最后发现在图片上传成功的组件里需要把数据返回到父页面，父页面接收到...
antd使用upload控件，上传时一直处于loading状态
richard123ok的博客
07-28 4613
文件处于如图所示的状态 解决办法： 在handleChange方法中加入this.forceUpdate()，例子如下 handleChange = ({fileList}) => { this.setState({ fileList: fileList }, () => { this.forceUpdate() }); };
vue 图片上传 回显 删除
小羽向前跑
04-17 1748
效果： 组件代码： <template> <div> <!--照片区域--> <div v-for="(urls, index) in imgs " :key="index" style="float: left; margin: 10px ; border: 1px solid #ccc;"> ...
解决antd upload自定义上传customRequest，上传时一直loading加载的问题
weixin_43422861的博客
11-30 1921
查看customRequest参数。
Antd-Upload组件设置fileList属性时onChnage只执行到“uploading“状态引发的一些问题的解决方案
weixin_42159569的博客
12-14 2450
需求：文件上传失败时不需要回显。 思路：添加fileList属性，绑定一个列表，上传成功的文件才加入列表中 ... const [ displayFileList, setDisplayFileList ] = useState<any[]>([]); ... <Upload action="xxx" accept=".xls*, .csv" ... fileList={displayFileList} ... onChang.
Vue表单校验图片，校验提示不消失的问题
fairy啊的博客
05-17 1989
表单中上传图片为必填项 但是上传图片之后这个红色提示文字仍然存在 解决办法是上传图片之后再去校验一次表单 上述问题解决
VUE3- ant design自动校验，明明输入框都输入内容了，还是显示提醒
m0_59214979的博客
10-10 3382
本节：ant design自动校验，明明输入框都输入内容了，还是显示提醒。
React Antd上传回调没有回调成功或者失败
qq_38359034的博客
06-28 953
官方文档说。
antd组件库upload组件上传后依旧提示rules
05-24
antd组件库的Upload组件上传文件后，如果还提示规则验证失败，可能是因为您设置了规则验证函数（rules）但是没有正确地处理上传文件的情况。您可以在规则验证函数中增加对上传文件的判断。例如，在上传图片时，您...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值