首页 > 其他分享 >antd upload action 不写(前端解析内容)

antd upload action 不写(前端解析内容)

时间:2024-05-13 14:57:02浏览次数:11  
标签:const upload customRequest file import action antd 上传

 

在使用Ant Design的Upload组件时,如果不提供action属性,那么文件的上传处理需要通过customRequest属性来自定义实现。

以下是一个不使用action属性,而是通过customRequest实现文件上传的例子:

 

import React from 'react';
import { Upload, message, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
 
function beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
}
 
function customRequest(option) {
  const { onSuccess, one rror, file, onProgress } = option;
 
  // 自定义上传处理逻辑,例如使用fetch或者XMLHttpRequest
  const formData = new FormData();
  formData.append('file', file);
 
  // 模拟上传
  setTimeout(() => {
    // 模拟成功的响应
    onSuccess("success");
 
    // 模拟错误的响应
    // one rror("error");
 
    // 模拟上传进度
    // onProgress({ percent: 50 });
  }, 1000);
}
 
const Demo = () => (
  <Upload
    name="file"
    onRemove={file => {
      console.log(file);
      return true;
    }}
    beforeUpload={beforeUpload}
    customRequest={customRequest}
  >
    <Button icon={<UploadOutlined />}>Click to Upload</Button>
  </Upload>
);
 
export default Demo;

 

自己的例子:

<Form.Item
          name="csv"
          label="csv文件"
          rules={[{ required: true, message: '请上传csv文件!' }]}
          valuePropName="fileList"
          getValueFromEvent={normFile}
          extra="如果上传多个文件,以第一个为准"
        >
          <Upload name="content" beforeUpload={beforeUpload} listType="text">
            <Button icon={<UploadOutlined />}>点击上传</Button>
          </Upload>
        </Form.Item>

去掉了也是OK的

<Upload name="content" action="/upload.do" ....中的action="/upload.do"。

 

标签:const,upload,customRequest,file,import,action,antd,上传
From: https://www.cnblogs.com/zccst/p/18189249

相关文章

  • 【java】@Transactional事务注解
    事务注解目录一、什么是事务?二、事务的特性(具有ACID的特性)1.A原子性(atomicity):2.C一致性(consistency):3.I隔离性(isolation):4.D持久性(Durability):三、@Transactional的介绍四、@Transactional的实现原理五、@Transactional事务的隔离级别六、@Transactional事务的传播......
  • react + antd + js 简单Cron组件,支持国际化
    Cron.jsimportReact,{Fragment,useState,useCallback,useRef,useEffect}from'react';import{Select,TimePicker,Input}from'antd';constOption=Select.Option;constmwidth80={minWidth:80,marginRight:10};constwidt......
  • Error: Cannot find module ‘D:\SoftSetupLoaction\nodejs\node_global\node_mod
    Error:Cannotfindmodule‘D:\SoftSetupLoaction\nodejs\node_global\node_modules\npm\bin\npm-cli.js‘  出现原因:重新安装可装了nodejs和npm网上查了很多方法,都建议重装,但是都没有效果(因为我就是重装之后出现的问题)按照错误提示node_global找不到npm-cli.js,个......
  • El-Upload组件上传图片并添加水印
    背景有的时候我们需要在上传图片中添加一些水印标识,然后上传至服务器效果图代码需求:点击直接预览图片,而不需要使用dialog上传图片添加水印后才预览图片上传图片文件添加水印。使用watermarkjs库转换将添加水印的图片转换成base64,更新预览图片的内容,否则预览的......
  • 为什么在有@Transactional注解的方法,一定要加rollbackFor异常回滚的异常类型?
    在spring项目中,@Transactional注解默认会回滚运行时异常(RuntimeException)及其子类当你在一个有@Transactional注解方法里面抛了一个Expection类型的异常,呢它是不支持事务回滚的,异常继承体系我们在一个方法里面要对事务进行操作,如果要抛异常,应该抛出untimeException,不能直接......
  • antd在form中一个select设置另一个select
    需求:所属网络(select)变化的时候,对应空投合约(select)也跟着变化。 constonChainChange=(chainId:any)=>{setCurrChainId(chainId)constcurrOptions=extraObj.airdropContractFormOptions.map((item:any)=>{if(item.network_id===chainId){......
  • Jenkins发版时报错Failed to instantiate [io.seata.spring.annotation.GlobalTransac
    Failedtoinstantiate[io.seata.spring.annotation.GlobalTransactionScanner]:Factorymethod'globalTransactionScanner'threwexception;nestedexceptionisjava.lang.ExceptionInInitializerError一开始以为是seata配置有问题,但最近也没有动过,直接执行发版脚本就没事......
  • antd下拉选择框搜索配置:filterOption
     <SelectallowClearmode="multiple"showArrow={true}showSearch={true}filterOption={(inputValue,option)=>option?.props?.label.includes(inputVal......
  • .net 8中使用过滤器记录系统日志 ActionFilter+Serilog
    1、添加自定义日志过滤器类usingSerilog;usingMicrosoft.AspNetCore.Mvc.Filters;namespaceADTO.CMS.Common.Filter{///<summary>///日志记录过滤器///</summary>publicclassLogActionFilter:IActionFilter{///<summary>///......
  • el-upload以及blob自动根据列表名称匹配下载
    dom文档<el-row:gutter="20"><el-col:span="16":offset="0"><el-form-itemlabel-width="120px"label="文件上传"><el-uploadref=......