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. expdp远程导出oracle库

    1.手动在本地建目录 E:\lvchengData 2.执行命令 create or replace directory data as 'E:\lvchengData\'; 3.为本地system用 ...

  2. pycharm和python安装

    1.pycharm安装:https://www.cnblogs.com/dcpeng/p/9031405.html 2,python安装:https://www.liaoxuefeng.com/wik ...

  3. POJ 1416:Shredding Company

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

  4. gabor滤波器

    https://blog.csdn.net/u013709270/article/details/49642397 https://github.com/xuewenyuan/Gabor_Visual ...

  5. HTTP协议(三):状态码

    前言 作者说:在上一节的内容中,HTTP大佬介绍了他是怎么让服务器和用户达成信息交互的,详细的说明了连接建立过程中用到的一些基本的技术原理,包括请求报文响应报文.建立持久化连接用的Cookie技术等内 ...

  6. Arduino串口的一些高级用法

    1.配置串口通信数据位.校验位.停止位通常我们使用Serial.begin(speed)来完成串口的初始化,这种方式,只能配置串口的波特率.而使用Serial.begin(speed, config) ...

  7. C#调用C++系列一:简单传值

    因为去实习的时候有一个小任务是C#想调用C++ opencv实现的一些处理,那我主要的想法就是将C++实现的OpenCV处理封装成dll库供C#调用,这里面还会涉及到一些托管和非托管的概念,我暂时的做 ...

  8. “帮你”校园资讯平台app使用体验

    该app由我的17级学长学姐编写而成,主要功能失物招领,二手市场,表白墙.该软件目前只是面向本校的各专业学生,为内测版本.该软件的注册流程简单,只需要学号确定身份后即可登陆,并且发布各种信息,或者与丢 ...

  9. 委托、Action、Func使用

    参考 using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syste ...

  10. Python—使用列表构造队列数据结构

    队列的概念 只允许在一端插入数据操作,在另一端进行删除数据操作的特殊线性表:进行插入操作的一端称为队尾(入队列),进行删除操作的一端称为队头(出队列):队列具有先进先出(FIFO)的特性. # _*_ ...