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=" ...
随机推荐
- 十一、CI框架之输出用户IP地址
一.代码如下: 二.效果如下: 不忘初心,如果您认为这篇文章有价值,认同作者的付出,可以微信二维码打赏任意金额给作者(微信号:382477247)哦,谢谢.
- 一、VIP课程:互联网工程专题 01-Git基本概念与核心命令掌握
第一课:Git基本概念与核心命令掌握.docx 课程概要: GIT 体系概述 GIT 核心命令使用 GIT 底层原理 一.GIT体系概述 1.使用方式区别 从本地把文件推送远程服务,SVN只需要com ...
- 《打造扛得住的MySQL数据库架构》第7章 SQL查询优化
SQL查询优化 7-1 获取有性能问题SQL的三种方法 如何设计最优的数据库表结构 如何建立最好的索引 如何拓展数据库的查询 查询优化,索引优化,库表结构优化 如何获取有性能问题的SQL 1.通过测试 ...
- java基础——深拷贝和浅拷贝的区别
浅拷贝:对基本数据类型进行值传递,对引用数据类型进行引用传递般的拷贝,此为浅拷贝. 深拷贝:对基本数据类型进行值传递,对引用数据类型船舰一个新的对象,并复制内容,这是深拷贝.
- 一名资深架构师规划Java程序员五年职业生涯指南
每个程序员.或者说每个工作者都应该有自己的职业规划,如果你不是富二代,不是官二代,也没有职业规划,希望你可以思考一下自己的将来.今天我给大家分享的是一篇来自阿里大牛对五年工作经验程序员的职业建议,希望 ...
- Maven:org.apache.maven.archiver.MavenArchiver.getManifest错误
Eclipse导入maven多模块工程时报错org.apache.maven.archiver.MavenArchiver.getManifestorg.apache.maven.archiver.M ...
- 浅入深出Java输入输出流主线知识梳理
Java把不同类型的输入.输出,这些输入输出有些是在屏幕上.有些是在电脑文件上, 都抽象为流(Stream) 按流的方向,分为输入流与输出流,注意这里的输出输出是相对于程序而言的,如:如对于一个J ...
- == 与 equals区别(HashCode方法)
1:==分析 1.2:基本类型比较 判断基本类型的数值是不是相等 1.3:对象类型比较 判断两个引用是不是指向同一个对象,即内存地址是不是相等. 2:equals分析 来判断对象内容是不是相等,一般有 ...
- linux下springboot项目通过jetty发布war包应用
Linux下jetty发布jar包 1.通过官网下载jetty点击下载https://repo1.maven.org/maven2/org/eclipse/jetty/jetty-distributi ...
- gcc编译出现:error: invalid operands to binary & (have ‘char *’ and ‘int *’)
/************************************************************************* > File Name: ptr_varia ...