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. POJ 1416:Shredding Company

    Shredding Company Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 4713   Accepted: 2714 ...

  2. Charles下载与破解方法

    文章参考:charles4.2下载与破解方法以及配置https 1.Charles官网下载 地址:https://www.charlesproxy.com/latest-release/downloa ...

  3. java-正则表达式判断移动联通电信手机号

    package com.linbilin.phone; import java.util.regex.Matcher; import java.util.regex.Pattern; public c ...

  4. jdk1.6以后 对synchronized锁做了哪些优化

    1.适应自旋锁 自旋锁:为了减少线程状态改变带来的消耗 不停地执行当前线程 2.锁消除: 不可能存在共享数据竞争的锁进行消除 3.锁粗化: 将连续的加锁 精简到只加一次锁 4.轻量级锁: 无竞争条件下 ...

  5. ES6 之 Integer数据类型

    1.简介(仅仅是提案) js所有数字都保存成64为浮点数,这就决定了整数的精确程度只能到53个二进制位. 大于这个范围的整数,js是无法精确表示的,这使得js不合适进行科学和金融方面的精确计算. 故引 ...

  6. springcloud之Eureka上

    0 环境 系统环境:win10 编辑器:IDEA 1 注册中心 Eureka是springcloud中的注册中心.原因: 当是单体应用 类似一条直线 随着项目越来越大 系统拆分 类似那个藕(模块间相互 ...

  7. Flux转Mono next()

    import java.util.LinkedHashMap; import java.util.Map; import java.util.NoSuchElementException; impor ...

  8. 吴裕雄--天生自然JAVA线程编程笔记:创建线程

    public class ThreadRuning extends Thread{ public ThreadRuning(String name){ //重写构造,可以对线程添加名字 super(n ...

  9. SQL基础教程(第2版)第5章 复杂查询:练习题

    /* 下面是解答示例 */ -- 创建视图的语句 CREATE VIEW ViewPractice5_1 AS SELECT product_name, sale_price, regist_date ...

  10. Java之创建线程的方式三:实现Callable接口

    import java.util.concurrent.Callable;import java.util.concurrent.ExecutionException;import java.util ...