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=" ...
随机推荐
- POJ 1416:Shredding Company
Shredding Company Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 4713 Accepted: 2714 ...
- Charles下载与破解方法
文章参考:charles4.2下载与破解方法以及配置https 1.Charles官网下载 地址:https://www.charlesproxy.com/latest-release/downloa ...
- java-正则表达式判断移动联通电信手机号
package com.linbilin.phone; import java.util.regex.Matcher; import java.util.regex.Pattern; public c ...
- jdk1.6以后 对synchronized锁做了哪些优化
1.适应自旋锁 自旋锁:为了减少线程状态改变带来的消耗 不停地执行当前线程 2.锁消除: 不可能存在共享数据竞争的锁进行消除 3.锁粗化: 将连续的加锁 精简到只加一次锁 4.轻量级锁: 无竞争条件下 ...
- ES6 之 Integer数据类型
1.简介(仅仅是提案) js所有数字都保存成64为浮点数,这就决定了整数的精确程度只能到53个二进制位. 大于这个范围的整数,js是无法精确表示的,这使得js不合适进行科学和金融方面的精确计算. 故引 ...
- springcloud之Eureka上
0 环境 系统环境:win10 编辑器:IDEA 1 注册中心 Eureka是springcloud中的注册中心.原因: 当是单体应用 类似一条直线 随着项目越来越大 系统拆分 类似那个藕(模块间相互 ...
- Flux转Mono next()
import java.util.LinkedHashMap; import java.util.Map; import java.util.NoSuchElementException; impor ...
- 吴裕雄--天生自然JAVA线程编程笔记:创建线程
public class ThreadRuning extends Thread{ public ThreadRuning(String name){ //重写构造,可以对线程添加名字 super(n ...
- SQL基础教程(第2版)第5章 复杂查询:练习题
/* 下面是解答示例 */ -- 创建视图的语句 CREATE VIEW ViewPractice5_1 AS SELECT product_name, sale_price, regist_date ...
- Java之创建线程的方式三:实现Callable接口
import java.util.concurrent.Callable;import java.util.concurrent.ExecutionException;import java.util ...