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组件其实还是单一上传,那只能依照它的方 ...
随机推荐
- Hugo + Github Pages 搭建个人博客
尝试过 Hexo .GatsbyJs. Vuepress 搭建博客后,对这些工具最大的不满,就是运行速度以及打包速度. 后来看到 Hugo ,号称最快的静态站点生成器后. 尝试搭建博客,发现不管是运行 ...
- 基于tcp的套接字编程
一,基础版服务器端客户端(一收一发,只有一个客户端链接) 服务器端: #Author : Kelvin #Date : 2019/1/28 22:10 from socket import * ser ...
- Python爬虫入门教程 37-100 云沃客项目外包网数据爬虫 scrapy
爬前叨叨 2019年开始了,今年计划写一整年的博客呢~,第一篇博客写一下 一个外包网站的爬虫,万一你从这个外包网站弄点外快呢,呵呵哒 数据分析 官方网址为 https://www.clouderwor ...
- 在nuget上发布自己的程序集教程
前期准备 [1]注册nuget官网账号:注册地址:https://www.nuget.org/ [2]下载Nuget.exe文件:下载地址:https://www.nuget.org/downloa ...
- 用weexplus从0到1写一个app
说明 基于wexplus开发app是来新公司才接触的,之前只是用过weex体验过写demo,当时就被用vue技术栈来开发app的开发体验惊艳到了,这个开发体验比react native要好很多,对于我 ...
- 多线程总结之旅(1):线程VS进程
一.进程:进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,也就是应用程序的执行实例,进程是系统进行资源分配和调度的一个独立单位.每个进程是由私有的虚拟地址空间.代码.数据和其它各种系统资 ...
- 在docker私有仓库如何查看有哪些镜像?
搭建了docker私有仓库,上传了一些镜像,时间长了就会忘了有哪些镜像,在网上查了,有大佬是通过脚本查看的,多厉害! #!/usr/bin/env python#-*- coding:utf-8 -* ...
- 如何检测或判断一个文件或字节流(无BOM)是什么编码类型
前言: 昨天,在文章:终于等到你:CYQ.Data V5系列 (ORM数据层,支持.NET Core)最新版本开源了 中, 不小心看到一条留言: 然后就去该地址看了一下,这一看,顺带折腾了一天. 今天 ...
- Pytorch实战1:线性回归(Linear Regresion)
GitHub代码练习地址:https://github.com/Neo-ML/MachineLearningPractice/blob/master/Pytorch01_LinearRegressio ...
- [Swift]LeetCode1036.逃离大迷宫 | Escape a Large Maze
In a 1 million by 1 million grid, the coordinates of each grid square are (x, y) with 0 <= x, y & ...