vue element-ui 文件上传
<el-upload class="upload-demo" action="" :before-remove="beforeRemove" :on-remove="onRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList" :http-request="uploadSectionFile">
<el-button size="small" type="primary">点击上传</el-button>
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
</el-upload>
js
接口:
export const uploadFile = params => {
return axios.post(`${easykp_config.test}/file/upload`, params, { headers: { 'author-token-key': localStorage.getItem('token') } }).then(res => res.data);
};
调用:
//文件上传
handleExceed(files, fileList) { //超出限制
this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) { //确定移除 return this.$confirm(`确定移除 ${ file.name }?`);
},
onRemove(file, fileList) { //删除清空
// console.log(file, fileList)
this.filesId = [];
},
uploadSectionFile(param) {
var fileObj = param.file;
var formData = new FormData();
formData.append('file', fileObj);
// console.log('formData',fileObj.size)可做大小限制等
uploadFile(formData).then((res) => { //请求数据
if (res.code == 200) {
this.filesId.push(res.body.id);
this.$message.success(`上传成功`);
} else {
this.$message({
message: res.message,
type: 'error'
});
}
});
}
具体详见官方api,很详细
http://element.eleme.io/#/zh-CN/component/upload#attribute
vue element-ui 文件上传的更多相关文章
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- 封装Vue Element的upload上传组件
本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...
- vue之element-ui文件上传
vue之element-ui文件上传 文件上传需求 对于文件上传,实际项目中我们的需求一般分两种: 对于单个的文件上传,比如拖动上传个图片之类的,或者是文件. 和表单一起实现上传(这种情况一般都是 ...
- vue+axios+elementUI文件上传与下载
vue+axios+elementUI文件上传与下载 Simple_Learn 关注 0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...
- VUE项目中文件上传兼容IE9
项目使用VUE编写,UI是ElementUI,但是Element的Upload组件是不兼容IE9的.因为IE9中无法使用FormData. 查找资料基本有两种解决方法:1.引入JQuery和jQuer ...
- element中文件上传
vue+element 文件操作 作者:一粒尘土 时间:2019-3-17 注:以下操作针对 vue-cli 目录 使用 组件常用参数 组件常用方法 上传文件 上传文件格式限制 回显文件 下载文件 删 ...
- vue中的文件上传和下载
文件上传 vue中的文件上传主要分为两步:前台获取到文件和提交到后台 获取文件 前台获取文件,主要是采用input框来实现 <el-dialog :title="addName&quo ...
- vue项目 多文件上传并显示在页面上
<template> <label for="file" class=" btn btn-default" style="borde ...
- 基于element UI 的上传插件
为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...
- vue element多图上传
最近项目需要优化图片上传,由单个改成多个,这里记录下自己遇到的一些问题和解决方法 本以为是传全部图片到后台,然后统一处理,但后面在Network中发现upload组件其实还是单一上传,那只能依照它的方 ...
随机推荐
- ASP.NET Core 项目实战(持续更新~~~)
一.前言 准备写这个系列文章的设想开始于今年9月,毫无意外,期间又又又又拖了很长时间,文章主要是为了记录自己学习使用 ASP.NET Core Web API 与 Vue 创建一个前后端分离的项目的整 ...
- 【重学计算机】操作系统D4章:设备管理
1. IO的控制方式 演进过程:轮询 --> 中断 --> DMA --> IO通道 经典布局:南北桥 PS:详见<计算机组成原理> 2. IO的实现 软件实现层次:硬件 ...
- 【Android Studio安装部署系列】十七、Android studio引用第三方库、jar、so、arr文件
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 在Android开发过程,经常需要用到第三方库以及jar.so.arr文件,那么如何引用到项目中呢?下面简单介绍下. 引用第三方库 ...
- 神经网络——反向传播BP算法公式推导
在神经网络中,当我们的网络层数越来越多时,网络的参数也越来越多,如何对网络进行训练呢?我们需要一种强大的算法,无论网络多复杂,都能够有效的进行训练.在众多的训练算法中,其中最杰出的代表就是BP算法,它 ...
- 前端笔记之NodeJS(一)初识NodeJS&内置模块&特点
一.NodeJS简介 NodeJS是开发服务器后台的东西,和PHP.JavaEE.python类似,和传统的浏览器的关注DOM的JS完全不同,将JavaScript触角伸到了服务器端.内核是Chrom ...
- Netty源码—二、server启动(2)
我们在使用Netty的时候的初始化代码一般如下 EventLoopGroup bossGroup = new NioEventLoopGroup(); EventLoopGroup workerGro ...
- SLAM+语音机器人DIY系列:(五)树莓派3开发环境搭建——1.安装系统ubuntu_mate_16.04
摘要 通过前面一系列的铺垫,相信大家对整个miiboo机器人的DIY有了一个清晰整体的认识.接下来就正式进入机器人大脑(嵌入式主板:树莓派3)的开发.本章将从树莓派3的开发环境搭建入手,为后续ros开 ...
- DevExpress控件安装破解和汉化使用教程
这段时间因公司业务需要.net开发且需要用到DevExpress控件,我自己研究学习了一下,用的是visual studio(2013)和DevExpress(V14.1.4),VS2013的下载安装 ...
- JDK和Tomcat安装和配置过程
Jdk: 第一步:在下载JDK 第二步:安装 更改安装路径 *JDK配置: JAVA_HOME 环境变量 D:\jdk1.7.0 CLASSPATH 环境变量 .,%JAVA_HOME%\lib ...
- 六大设计原则(三)DIP依赖倒置原则
依赖倒置原则DIP(Dependence Inversion Principle) 依赖倒置原则的含义 高层模块不能依赖低层模块,二者都应该依赖其抽象. 抽象不应该依赖于细节. 细节应该依赖抽象. 什 ...