Ant Design_Form表单上传文件组件实现详解

目录
  • 背景
  • 实现
    • 问题1:
    • 问题2:
      • tip1:注意一下新增和修改时校验方法
      • tip2: 注意一下beforeUpload的返回值

背景

需要实现的需求：在一个表单提交中，需要提交各种组件的提交信息，其中包括上传文件；一般呢，我们会在选择文件的时候将文件先传到服务器，拿到文件的URL,在提交表单的时候传的其实是文件的URL；

刚开始，对文件没有必填的校验，是比较简单的；但是后来要求文件是必传的，需要加上文件的校验，就暴漏了一些小问题；

实现

首先，先对Upload组件加上必传的校验

rules={[{ required: true, message: "请上传文件" }]}，

直接添加required校验，肯定是不行的，我们需要自定义文件的校验；

dom结构大体是这样：

<Item label="上传文件" name="file" rules={[{ required: true, validator: checkFile }]}>
    <Upload {...uploadProps}>
            <div className="upload-content">
                    {imgUrl ? (
                            <div className="upload-cover">
                                    <img src={imgUrl} />
                            </div>
                    ) : (
                            <div className="upload-btn">{imgLoading ? <LoadingOutlined /> : <PlusOutlined />}</div>
                    )}
            </div>
    </Upload>
</Item>

校验：

const checkFile = (rule: any, value: any) => {
    if (!value) {
            return Promise.reject("请上传文件");
    }
    return Promise.resolve();
};

问题1:

warning.js:6 Warning: [antd: Upload] value is not a valid prop, do you mean fileList?

但是控制台报错：

warning.js:6 Warning: [antd: Upload] value is not a valid prop, do you mean fileList?

按照指示：在Item组件上加上：valuePropName="fileList"，发现控制台的报错确实没有了；

但是新的问题来了，当我们上传文件的时候，画面直接崩了！！

问题2:

Uncaught TypeError: (fileList || []).forEach is not a function

参照官网：ant.design/components/…

在Item组件上添加getValueFromEvent事件；

<Item
        label="上传文件"
        name="file"
        valuePropName="fileList"
        rules={[{ required: true, validator: checkFile }]}
        getValueFromEvent={normFile}
>

const normFile = (e: any) => {
        if (Array.isArray(e)) {
                return e;
        }
        return e?.fileList;
};

最后效果：

tip1:注意一下新增和修改时校验方法

这时候校验是没问题了，但是，如果你和我一样，新增的提交和编辑的提交公用的时候，这一块校验还是会有问题；编辑内容的时候我们拿到的是文件的URL地址，不是文件对象，那么校验就会一直过不去；

所以校验方法就需要改一下，判断条件也要加上URL，这一块就不贴代码了～

tip2: 注意一下beforeUpload的返回值

这里顺道提一下，ant design 中如果不想走默认的上传，就可以beforeUpload身上做文章了，但是一定要注意拦截默认上传的条件是：

若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传

因为我在这个方法开始的时候对文件的大小进行了限制，如果不满足就终止，但是，习惯性的写成了return；这时候并没有阻止默认上传的行为；需要改写为return false；

以上就是Ant Design_Form表单上传文件组件实现详解的详细内容，更多关于Ant Design_Form表单上传文件组件的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue+Ant Design进度条滑块与input联动效果实现

    需求:滑块进度与输入框为一致,默认值为80,最小不能小于30,最大为100 子组件: <template> <div class="progress-box"> <div ref="slider" class="slider" > <div class="process" :style="{ width }" ></div> <div ref

  • vue3中使用ant-design-vue的layout组件实现动态导航栏和面包屑功能

    目录 0 前言 1 准备工作 1.1 安装ant-design-vue 1.2 安装图标组件包 2 选择组件 3 路由文件 4 Vue导航页面 5 最终效果 0 前言 最近在自己搞一个前后端小项目,前端想使用ant-design-vue的layout组件实现动态导航栏和面包屑,但是网上的资料较少,所以我就自己整合实现了一下,在此记录分享. 1 准备工作 基于一个新建的Vue3项目上实现. 1.1 安装ant-design-vue 官方文档:Components Overview - Ant De

  • AntDesignPro使用electron构建桌面应用示例详解

    目录 注意事项声明 主要分为两个部分 开发环境使用 打包应用配置 package.json配置打包后的路径方式 使用 electron-builder 打包 exe 文件或者安装包,压缩包 安装 package.json添加命令 (打包windows) 添加打包配置 执行打包命令 使用 electron-packager 打包成 exe 文件 执行命令 提示 注意事项声明 所有 node 包必须使用 npm 安装不可使用 cnpm, 使用 cnpm 安装的 node 包会导致打包时间无限可能 具

  • 如何修改ant design组件自带样式

    目录 修改ant design组件自带样式 背景 需求 解决方法 Notice 更改antd 默认样式 更改ant design 默认样式 修改ant design组件自带样式 背景 Vue-CLI创建的项目 需求 把走马灯的面板指示点(如图1)改成真正的点(如图2) 解决方法 走马灯自带面板指示点类名dotsClass = "slick-dots",考虑到项目中可能多处会用到走马灯,请自行更改类名(我的项目只有一处用到,故不想改) 在src/assets/style/(这个是我用来放

  • 解决ant-design-vue安装报错的问题

    目录 ant-design-vue安装报错问题 版本 解决方法 安装ant-design-vue报错 npm ERR! Error: EPERM: operation not permitted ant-design-vue安装报错问题 版本 Vue-CLI@4.3.0 Less-Loader@6.1.0 解决方法 在vue.config.js里加入解决~ module.exports = { + css: { + loaderOptions: { + less: { + lessOptions

  • Ant Design_Form表单上传文件组件实现详解

    目录 背景 实现 问题1: 问题2: tip1:注意一下新增和修改时校验方法 tip2: 注意一下beforeUpload的返回值 背景 需要实现的需求:在一个表单提交中,需要提交各种组件的提交信息,其中包括上传文件:一般呢,我们会在选择文件的时候将文件先传到服务器,拿到文件的URL,在提交表单的时候传的其实是文件的URL: 刚开始,对文件没有必填的校验,是比较简单的:但是后来要求文件是必传的,需要加上文件的校验,就暴漏了一些小问题: 实现 首先,先对Upload组件加上必传的校验 rules=

  • thinkphp表单上传文件并将文件路径保存到数据库中

    thinkphp表单上传文件并将文件路径保存到数据库中

    上传单个文件,此文以上传图片为例,上传效果如图所示 创建数据库upload_img,用于保存上传路径 CREATE TABLE `seminar_upload_img` ( `id` int(11) NOT NULL AUTO_INCREMENT, `img_name` varchar(255) DEFAULT NULL COMMENT '图片名称', `img_url` varchar(255) DEFAULT NULL COMMENT '图片路径', `create_time` text,

  • PHP中TP5 上传文件的实例详解

    PHP中TP5 上传文件的实例详解

    php 文件上传 效果图: 实现代码: application\index\controller\Index.php <?php namespace app\index\controller; use think\Controller; use think\Request; class Index extends Controller { //文件上传表单 public function index() { return $this->fetch(); } //文件上传提交 public fu

  • Form表单上传文件（type="file"）的使用

    一,单个文件的上传 1.html/jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/

  • Form表单上传文件（type="file"）的使用

    一,单个文件的上传 1.html/jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/

  • php使用curl模拟浏览器表单上传文件或者图片的方法

    前言 在浏览器使用html中的input框我们可以实现文件的上传,表单元素选用 <input type="file"> 控件,form 表单需要设置 enctype="multipart/form-data" 属性.比如: <body> <form action="UploadFile.php" method="post" enctype="multipart/form-data&quo

  • servlet上传文件实现代码详解（四）

    本文实例为大家分享了servlet上传文件的具体代码,供大家参考,具体内容如下 1.servlet上传文件 servlet上传文件就是将客户端的文件上传到服务器端. 向服务器发送数据时,客户端发送的http请求正文采用"multipart/form-data"数据类型,他表示复杂的多个子部分的复合表单. 为了简化"multipart/form-data"数据的处理过程.可以使用Apache组织提供是的两个开源包来来实现上传. fileupload软件包(common

  • Django框架静态文件处理、中间件、上传文件操作实例详解

    本文实例讲述了Django框架静态文件处理.中间件.上传文件操作.分享给大家供大家参考,具体如下: Django静态文件处理.中间件.上传文件 静态文件处理 在Django中,一般专门创建一个static目录来存放静态文件(css,js,image,video等文件). a. 在创建目录前,我们需要配置静态文件的路径.如: #在项目的settings.py文件中,配置STATIC_URL,一般默认是: STATIC_URL = '/static/' # '/static/'是指uri,映射下面的

  • Jmeter post上传文件实现过程详解

    上周五东西都收拾好了,然后被叫住加班,直接搞到凌晨一两点,原因是另一个项目的性能出了点问题.为此我抓包写了一下主业务流的接口,涉及到文件上传,记录一下吧. 一.创建线程组,添加各类组件 这个就不用说了.由于需要登录,所以我加了一个信息头管理器,把token写在里面. 二.文件上传 有接口文档的话,那就对着文档写,没api文档,就自己抓包看了.(注意:我在线程组下面加了http信息头管理器是因为我下面的"核对数据"和"预览发送"两个步骤需要这个Content-Type

  • nodejs 实现模拟form表单上传文件

    nodejs 实现模拟form表单上传文件

    以前项目里有这个方法,最近在客户那里出问题了,同事说,这个方法从来就没管用过,SO,用了一天时间把这个方法给搞出来了(觉得花费的时间长了点),分享之. 代码及测试用例: var http = require('http'); var path = require('path'); var fs = require('fs'); function postFile(fileKeyValue, req) { var boundaryKey = Math.random().toString(16);

随机推荐