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 上传文件的更多相关文章

  1. Ant Design Upload 组件上传文件到云服务器 - 七牛云、腾讯云和阿里云的分别实现

    在前端项目中经常遇到上传文件的需求,ant design 作为 react 的前端框架,提供的 upload 组件为上传文件提供了很大的方便,官方提供的各种形式的上传基本上可以覆盖大多数的场景,但是对 ...

  2. vue 上传文件 和 下载文件

    Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...

  3. vue 上传文件 和 下载文件 面试的时候被问到过

    Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...

  4. axios+Vue上传文件显示进度

    一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> &l ...

  5. vue上传文件

    <div> <input type="file" class="file" name="file" @change=&qu ...

  6. vue+上传文件夹

    在做项目开发的时候,上传东西无论文件也好,还是文件夹都需要用到 <input type="file" id="filepicker" name=" ...

  7. vue 上传文件 并以表格形式显示在页面上

    先上代码 <label for="file" class="btn">多文件上传</label> <input type=&quo ...

  8. Vue上传文件:ElementUI中的upload实现

    一.上传文件实现 两种实现方式: 1.直接action <el-upload  .利用before-upload属性 此种方式有个弊端,就是action是必选的参数,那么action如果和pos ...

  9. [自动运维]ant脚本打包,上传文件到指定服务器,并部署

    1.根节点使用,表示根目录为当前目录,默认启动的target为build,项目名称为othersysm, <project basedir="." default=" ...

随机推荐

  1. MVC学生管理系统-阶段III(删除学生信息)

    项目源码 :https://download.csdn.net/download/weixin_44718300/11091042 前期准备,主体框架,学生列表显示  请看阶段一文章 添加学生信息   ...

  2. SQL inner join, join, left join, right join, full outer join

    基本信息 创建两个表a1, a2. 两个表的重要差别是:a1 中有5,'wu',a2中没有. a2中有 4,'li',而a1中没有. 创建表和插入数据的代码如下: -- 创建a1表 create ta ...

  3. 报错:Your CPU supports instructions that this TensorFlow binary was not compiled to use: AVX2

    1.问题 写了一个简单的单层神经网络跑mnist手写数字集,结果每次fit都会出现dead kernel 很多dead kernel首先不要急着去网上搜dead kernel怎么解决,因为大家出现的原 ...

  4. [Python ]小波变化库——Pywalvets 学习笔记

    [Python ]小波变化库——Pywalvets 学习笔记 2017年03月20日 14:04:35 SNII_629 阅读数:24776 标签: python库pywavelets小波变换 更多 ...

  5. 连接数据库方法2-DBCP

    DBCP(连接池): 解决对数据库建立以及关闭连接时消耗大量资源的解决方案. 程序创建和关闭对数据库连接时会消耗大量的资源,连接池技术帮我们 在程序运行的开始时就预先创建大量的连接,这些连接组成一个池 ...

  6. HTML-基础标记

    HTML, 一种超文本标记语言,顾名思义,要比文本的样式多,而且是由标记组成,还是一门语言. 标记写法 <标记名> <a></a>双标记 超链接 <br /& ...

  7. python里的文件I/O

    Python 文件I/O 本章只讲述所有基本的的I/O函数,更多函数请参考Python标准文档. 打印到屏幕 最简单的输出方法是用print语句,你可以给它传递零个或多个用逗号隔开的表达式.此函数把你 ...

  8. CTF-域渗透--HTTP服务--命令注入2

    开门见山 1. 启动metasploit 2. 设置参数参数选项 3. 查看最后设置后的结果 4. 启动监听 5. 使用msfvemon制作webshell 6. 开启apache服务 7. 使用ba ...

  9. Mybatis核心类生命周期和管理

    Mybatis核心类生命周期和管理 原文链接:https://blog.csdn.net/qq1134550437/article/details/51960480 1.SqlSessionFacto ...

  10. rocketmq 使用

    rocketmq  基本使用可以看官网和官网给的demo. https://github.com/apache/rocketmq/tree/master/example 这里主要说明几个点:rocke ...