ant design for vue 上传文件
1、使用customRequest
customRequest 通过覆盖默认的上传行为,可以自定义自己的上传实现 Function
定义customRequest,之前定义action行为会被覆盖,可以注释掉
<a-upload
name="file"
:multiple="false"
@change="changeFile"
:customRequest="customRequest"
>
<a-button type="primary"> <a-icon type="upload" />导入Excel</a-button>
</a-upload>
changeFile(info) { // 上传文件
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
this.$message.success(`${info.file.name} 上传成功`);
} else if (info.file.status === 'error') {
this.$message.error(`${info.file.name} 上传失败.`);
}
},
customRequest(data){ // 上传提交
const formData = new FormData()
formData.append('file', data.file)
formData.append('token', "token")
this.saveFile(formData)
},
saveFile (formData) {
this.axios({
method: 'post',
url: '/api/saveFile',
headers: {
},
params:{
},
data: formData
}).then((response) => {
console.log(response)
}).catch(function (error) {
console.log(error)
})
},
ant design for vue 上传文件的更多相关文章
- Ant Design Upload 组件上传文件到云服务器 - 七牛云、腾讯云和阿里云的分别实现
在前端项目中经常遇到上传文件的需求,ant design 作为 react 的前端框架,提供的 upload 组件为上传文件提供了很大的方便,官方提供的各种形式的上传基本上可以覆盖大多数的场景,但是对 ...
- vue 上传文件 和 下载文件
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...
- vue 上传文件 和 下载文件 面试的时候被问到过
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...
- axios+Vue上传文件显示进度
一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> &l ...
- vue上传文件
<div> <input type="file" class="file" name="file" @change=&qu ...
- vue+上传文件夹
在做项目开发的时候,上传东西无论文件也好,还是文件夹都需要用到 <input type="file" id="filepicker" name=" ...
- vue 上传文件 并以表格形式显示在页面上
先上代码 <label for="file" class="btn">多文件上传</label> <input type=&quo ...
- Vue上传文件:ElementUI中的upload实现
一.上传文件实现 两种实现方式: 1.直接action <el-upload .利用before-upload属性 此种方式有个弊端,就是action是必选的参数,那么action如果和pos ...
- [自动运维]ant脚本打包,上传文件到指定服务器,并部署
1.根节点使用,表示根目录为当前目录,默认启动的target为build,项目名称为othersysm, <project basedir="." default=" ...
随机推荐
- 第42章 AWR报表的使用
第42章 AWR报表的使用exec dbms_gather.gather_table_stats('scott','emp');exec dbms_gather_gather_index_stats( ...
- Android进阶——Android消息机制之Looper、Handler、MessageQueen
Android消息机制可以说是我们Android工程师面试题中的必考题,弄懂它的原理是我们避不开的任务,所以长痛不如短痛,花点时间干掉他,废话不多说,开车啦 在安卓开发中,常常会遇到获取数据后更新UI ...
- vue项目配置多入口多出口【转载】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/localhost_1314/article ...
- 2018CCPC吉林赛区 hdu6555~hdu6566
2018CCPC吉林赛区(重现赛)- 感谢北华大学 A 基础数论. #include<bits/stdc++.h> using namespace std; typedef long lo ...
- HyperLedger Cello学习笔记
HyperLedger Cello学习笔记 转载请注明出处:HyperLedger Cello学习笔记 概述 Hyperledger Cello是Hyperledger下的一个子项目,其主要功能如下: ...
- SSM框架和微服务构架和的联系与区别
spring和springMvc: 1. spring是一个一站式的轻量级的java开发框架,核心是控制反转(IOC)和面向切面(AOP),针对于开发的WEB层(springMvc).业务层(Ioc) ...
- 剑指offer第40题
package com.yan.offer; /** * 题目描述: * * 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. * * @author Ya ...
- 新浪SAE云平台下使用codeigniter的数据库配置
新浪SAE云平台下使用codeigniter的数据库配置 投稿:shichen2014 字体:[增加 减小] 类型:转载 这篇文章主要介绍了新浪SAE云平台下使用codeigniter的数据库配置,主 ...
- 干货 | VPC之间的网络连通实践
随着公有云技术的日臻完善,越来越多的政府部门.事业单位.企业.个人将自己的IT系统部署在公有云之上.在公有云之上部署业务系统有一个特点,就是先要规划网络,有了网络以后,才能把一些相关的产品部署在网络里 ...
- 18 11 07 pygame 继续使用
---恢复内容开始--- 1 给原来的游戏不定时 增加一些敌机 用到了pygame的定时器 定时器就是每隔一段时间 就进行一次相同的操作 2 pyagame 在捕获键盘操作有两种 1 ...