先说我要实现的效果:我想用antd 的 upload 实现手动上传文件,上传文件时还有附加参数

我看了官网上说在beforeUpload中返回false,然后通过按钮点击事件触发上传。

Q1:附加参数怎么传到后台(我知道自动上传的话用data,但是手动上传的时候用data传不过去)

Q2:文件流要怎么传给后台啊?

我直接将获取到的filelist加上附加参数,组成json对象,传过去之后,后台报“request has no multipart/form-data Content-Type”的错。

下面是我的代码

submit() {

const { fileList, beginTime, endTime } = this.state;

const sendData = {

file: fileList[0], // 一次只上传一个文件

beginTime: parseInt(beginTime, 0),

endTime: parseInt(endTime, 0),

};

// console.log(fileList);

Service.uploadCode(JSON.stringify(sendData))

.then((res) => {

this.setState({

fileList: [],

// buttonDisabled: true,

});

console.log(res);

})

.catch((err) => {

console.log(err);

});

}

render() {

const self = this;

const {

uploadLoading,

submitLoading,

buttonDisabled,

beginTime,

endTime,

} = this.state;

const uploadProps = {

action: '/api/v1/productExchangeCode/import',

onRemove: (file) => {

this.setState(({ fileList }) => {

const index = fileList.indexOf(file);

const newFileList = fileList.slice();

newFileList.splice(index, 1);

return {

fileList: newFileList,

};

});

},

beforeUpload: (file) => {

console.log(file);

if (file.name.split('.')[1] !== 'xlsx') {

message.error('只能上传.xls或者.xlsx文件!', 3);

return false;

} else {

if (!beginTime || !endTime) {

Modal.warning({

title: '信息不完整',

content: '请填写有效期',

});

return false;

}

self.setState(({ fileList }) => ({

buttonDisabled: true,

fileList: [...fileList, file],

}), () => {

console.log(this.state.fileList);

});

return false;

}

},

fileList: this.state.fileList,

};

return (

导入兑换码列表

this.handleCancel(e)}>

取消

this.submit(e)}>

确定

)

antd upload手动上传_antd 手动上传文件相关推荐

  1. antd 选择文件夹_antd 手动上传文件

    先说我要实现的效果:我想用antd 的 upload 实现手动上传文件,上传文件时还有附加参数 我看了官网上说在beforeUpload中返回false,然后通过按钮点击事件触发上传. Q1:附加参数 ...

  2. antd upload手动上传_Flask上传文件

    Flask上传文件 上传文件包括很多,比如用户头像,文章图片,文件分享等等,它也涉及到很多内容:上传文件,过滤文件类型,限制大小,文件名的编辑,拖拽上传,进度条,文件命名,文件目录的管理等等. 文件上 ...

  3. antd upload手动上传_SpringBoot 如何上传大文件?

    最近遇见一个需要上传超大大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...

  4. antd Upload 文件上传

    1.antd官网Upload组件: https://ant.design/components/upload-cn/ 2.下图是最近开发的上传文档的效果: 3.文件上传的实现: (1)方法一:antd ...

  5. antd Upload 自定义上传

    需求 由于使用antd 上传图片,在某些情况下,例如token 失效,导致上传图片错误,但是antd 组件始终会走onChange 事件 导致上传路径为空情况 解决办法 使用自定义上传 // 自定义上 ...

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

    antd Upload组件上传状态一直处于uploading 对于受控模式,需要在 onChange 中始终 setState fileList,保证所有状态同步到 Upload 内 import { ...

  7. 【Antd Design Upload】 antd Upload 上传时只有Uploading状态,无法获取返回的数据

    问题:antd Upload 上传时只触发Uploading状态,无法获取服务器返回的response,根据控制台的结果发现只有一种Uploading,上传图片时只触发了一次. 根据官网可以知道.上传 ...

  8. antd pro项目中 antd Upload组件 基于 lrz 在上传前做图片压缩

    lrz npm和参数文档可供参考 import { Upload,Button} from 'antd'; import lrz from 'lrz';//处理函数 function compress ...

  9. Antd Upload 文件上传,自定义上传错误信息

    项目需求 使用antd Upload 组件 项目上要求前端对上传不符合标准的图片展示具体的错误信息 不设置action,即返回信息无response ,先在前端上传后调用接口保存 效果截图 主要是根据 ...

最新文章

  1. 语义分割:最简单的代码实现!
  2. JAVA——基于HttpClient的正方教务系统[1999-2020]模拟登录|模拟退出|课程查询|成绩查询|考试查询基本解决方案
  3. 农历鸡年(丁酉)正月初一第一博
  4. C语言编程对缓冲区的理解
  5. html table vtop,PART2HTML语言.doc
  6. HDOJ 1160 FatMouse's Speed
  7. android p wifi一直在扫描_Android Wifi 扫描及自动连接
  8. vmware虚拟机Centos安装samba全过程
  9. [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局
  10. Go新手上路(时不时更新)
  11. vit transformer中的cls_token
  12. Julia:Plots 包的属性汇总
  13. Python游戏之运动物体寻路——A星算法与扩展
  14. 在ubuntu20.04中设置锁屏背景(亲测有效)
  15. Android绘制颜色渐变图形
  16. 远程桌面仅计算机,仅允许运行使用网络级别身份验证的远程桌面计算机连接失败处理方法(远程桌面连接)...
  17. 站长工具大全-站长软件网站-站长工具网站-站长必备工具免费
  18. 将多行文件转换为一行
  19. 每天学点说话技巧+人性的弱点 +陈吉宁
  20. 音频工具 Adobe Audition

热门文章

  1. 电子计算机的发展与应用ppt,计算机发展简史ppt
  2. 专家系统类毕业论文文献(推荐10篇)
  3. Storage Access API 介绍
  4. PWA 应用提示安装到桌面
  5. 数字证书明文_明文数字证书风险
  6. 三步解决!Word2010 论文格式的多级标题设置,标号与文字之间间隔过大问题
  7. 【化学信息学】药物设计中的生物电子等排体
  8. MATLAB-如何在全图中设置局部放大图
  9. Cannot set LC_CTYPE to default locale 解决(make localedata/install-locales )
  10. 建筑市场数据(四库一平台)API接口开放