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. iOS下JS与原生的交互二

    本篇主要讲的是UIWebView和JS的交互,UIWebView和JS交互的详解https://www.cnblogs.com/llhlj/p/6429431.html 一. WKWebView调用J ...

  2. jquery散记

    感觉jquery的用法都要忘没了,简单捡一下 1.window.onload与$(document).ready的区别 ()编写个数 window.onload = function(){} //不能 ...

  3. 计算机网络(1): http原理和uuid

    http 的请求报文和响应报文格式 请求报文有哪些方法 一个典型的http报文 状态码有哪几种 以及短语是用来解释状态码的 接口测试中,需要使用到UUID,用来生成唯一ID. 1.什么是UUID UU ...

  4. MySQL的DDL和DML

    SQL语句:结构化查询语句,使用SQL与数据库“沟通”,完成相应的数据库操作. 语句分类 DDL(Data Definition Languages)语句:即数据库定义语句,用来创建数据库中的表.索引 ...

  5. .NET技术-4.0. NETCORE跨域

    .NET技术-4.0. NETCORE跨域 1.安装程序CORS程序包,一般默认都带了此程序包的 Install-Package Microsoft.AspNetCore.Mvc.Cors 2.配置C ...

  6. 简单vue的监听属性(单位换算)

    单位换算 单位换算可以根据实际情况换 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  7. Vue.js——4.指令 笔记

    v-cloak:解决网速延迟 闪烁问题v-text=msg: 和{{}}表达式一样,没有闪烁问题,但是前后不能加别的,覆盖原本的内容 innerTextv-html=msg:innerHtml,一样可 ...

  8. nginx安装https证书

    安装证书 文件说明:1. 证书文件xxxxx.pem,包含两段内容,请不要删除任何一段内容.2. 如果是证书系统创建的CSR,还包含:证书私钥文件xxxx.key. ( 1 ) 在Nginx的安装目录 ...

  9. Spring Cloud Alibaba 教程 | Nacos(三)

    使用Nacos作为配置中心 前面我们已经介绍过滤Nacos是一个更易于构建云原生应用的动态服务发现.配置管理和服务管理平台.所以它可以作为注册中心和配置中心,作为注册中心Nacos可以让我们灵活配置多 ...

  10. php 查看接口运行时间

    代码如何: <?php $start_time = microtime(true); for ($i=0;$i<100000000;$i++){}; $end_time = microti ...