antd vue表单上传文件_AntDesign vue学习笔记-自定义文件上传
上传文件时实际可能需要传输一个token。
方法一:
1、查看vue antdesign文档
https://vue.ant.design/components/upload-cn/
2、使用customRequest
customRequest 通过覆盖默认的上传行为,可以自定义自己的上传实现 Function
3、定义customRequest,之前定义action行为会被覆盖,可以注释掉
4、customRequest代码如下
customRequest(data) {
constformData= newFormData()
formData.append('file', data.file)
formData.append('token', 'aiufpaidfupipiu')//随便写一个token示例
this.saveFile(formData)
},
saveFile(formData) {
letthat= this
httpUtil.post("/snf/File/PostImportExcel", formData, res=>{
retFun(res)
})
},
5、这样当文件变化时,就会附带token并上传到服务器,NetWork观察提交数据如下
6、有同学反映无法接受数据,现给一个后端代码demo(.netcore)参考,新建一个.netcore webapi工程,修改Post代码如下。
7、D盘下文件保存成功如下
方法二:
最近发现有一种官方例子更符合习惯思维的方法,看这个例子
Select File
type="primary"@click="handleUpload":disabled="fileList.length === 0":loading="uploading"style="margin-top: 16px"
>{{ uploading? 'Uploading' : 'Start Upload'}}
exportdefault{
data() {return{
fileList: [],
uploading:false,
};
},
methods: {
handleRemove(file) {const index = this.fileList.indexOf(file);const newFileList = this.fileList.slice();
newFileList.splice(index,1);this.fileList =newFileList;
},
beforeUpload(file) {this.fileList = [...this.fileList, file];return false;
},
handleUpload() {const { fileList } = this;const formData = newFormData();
fileList.forEach(file=>{
formData.append('files[]', file);//后面再加上token
});this.uploading = true;//You can use any AJAX library you like
request({
url:'https://www.mocky.io/v2/5cc8019d300000980a055e76',
method:'post',
processData:false,
data: formData,
success: ()=>{this.fileList =[];this.uploading = false;this.$message.success('upload successfully.');
},
error: ()=>{this.uploading = false;this.$message.error('upload failed.');
},
});
},
},
};
antd vue表单上传文件_AntDesign vue学习笔记-自定义文件上传相关推荐
- Django实现用户注册登录,表单提交后跳转网页(学习笔记)
效果图如下: 1.新建项目和APP 使用命令提示符,进入想存放项目的目录: //新建项目coco django-admin startproject coco //新建app python manag ...
- Unity学习笔记--自定义文件的处理:Scripted Importers的简单使用
目录 前言 Scripted Importers基本介绍 应用实例 第一步 第二步 效果 关于ctx.SetMainObject() 更多使用方法 项目地址 前言 我们知道,当我们把一些Unity支持 ...
- antd vue表单验证_antd-for-vue 表单验证失效 自定义表单验证使表单非空验证失效(其他验证失效)...
## antd-for-vue 表单验证失效 自定义表单验证使表单非空验证失效(其他验证失效) ##### antd 的 表单校验方法包括 validateFields 和 validateField ...
- 前端框架Vue(11)——Vue+表单验证 VeeValidate 实践
这次来讲一下表单验证插件 VeeValidate,那为什么要结合 Vue 来讲呢?来看一下 github 上的图片就明白了! 为 Vue 而来的!不清楚是不是 Vue 的官方表单验证插件. 废话不多说 ...
- Vue 表单验证插件的写作过程
前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue.这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js. ...
- java web 文件上传_Javaweb学习笔记10—文件上传与下载
今天来讲javaweb的第10阶段学习.文件的上传与下载,今天主要说的是这个功能的实现,不用说了,听名字就是外行人也知道肯定很重要啦. 老规矩,首先先用一张思维导图来展现今天的博客内容. ps:我的思 ...
- vue 表单验证按钮事件交由父组件触发
vue 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法 子组件: //内容部分 <Form ref="formCustom" :model="formC ...
- Vue.js-Day02-AM【Vue表单、核心指令(单选框、密码框、多行文本框、单选、多选、勾选、下拉列表)、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目 录 1.Vue表单 原生JS实现异步表单提交 运行截图 代码 核心指令 单选框.密码框.多行文本框 单选 多选 勾 ...
- Python Day 67 Dango框架图解(总结)、Wsgiref和uwsgi、前后端传输数据的编码格式、From表单和Ajax方式在前端往后端发送文件、补充一下页面清缓存...
##Django框架图解 ##前后端传输数据的编码格式 #前后端传输数据的编码格式1.urlencoded 2.formdata 3.application/json ##From表单和Ajax方式在 ...
最新文章
- 在坚持了15年后,我毅然决定离开 Linux,投入 Mac 的怀抱
- 【MySQL】简单命令总结
- 疑难杂症——bash: /dev/null: Permission denied
- May 18:PHP 用到的学习工具
- pdfminer3k 官方文档_IPFS官方周报112期
- Shiro之从数据库初始化角色权限信息
- linux 让暂停的进程恢复,Linux 下进程的挂起和恢复命令
- 重磅!阿里自研RISC-V处理器玄铁910成功运行安卓10,相关代码开源
- python中pass作用_总结python中pass的作用
- java开发的格式与书写规范
- 编织机上下料西门子S71200PLC和KTP700触摸屏程序博途
- php矢量瓦片,【教你一招】张海平:如何将小范围在线地图切片数据转换为GIS矢量数据?...
- Font Awesome 是一套绝佳的图标字体库和CSS框架
- 基于Fruits-360数据集构建CNN进行水果识别实验
- 基于codewarrior10.x的VxWorks bootrom调试 DDR3 SDRAM调试
- confusion_matrix
- WiFi 6是不是真的很“6”?一文解决你对WiFi 6的所有疑惑
- html+css+js+快速入门
- Pete's Pantry
- SVN authz 配置详解 转载
热门文章
- 200T四柱式液压机结构及控制系统设计(设计说明书+CAD 液压机+液压站+油箱+主缸+主缸缸筒+液压系统原理图+液压机电气控制系统+梯形图)
- KTDictSeg 1.4 版本功能介绍 - 多元分词
- ubuntu右上角红色三角警告
- 全新二改广告横幅在线源码
- IMT-2020(5G)推进组发布《5G-Advanced 场景需求与关键技术白皮书》
- Bridge 模式(转)
- Protues的一个简单51程序仿真
- grayscale.js插件使页面变灰
- 燃气灶电气线路图及原理_燃气报警器电路图大全(六款模拟电路设计原理图详解)...
- GEWorker界面展示及功能组成介绍,怎么使用GE-Worker?