Vue使用element上传

<el-upload
action
v-if="IsUpload"
style="display:inline"
list-type="picture-card"
:on-remove="handleRemove"
:on-success="onSuccess"
:on-change="on_change"
:before-remove="before_remove"
:limit="1"
:before-upload="onBeforeUpload"
accept=".jpg, .png"
:http-request="uploadFile"
:on-exceed="Exceed"
:file-list="imgUrls"
>
<i class="el-icon-plus"></i>
<i
id="uploadImg"
style="position: absolute;top: 29%;left: 50%;transform: translateX(-50%);color: #F56C6C;font-size: 12px;display:none"
>请上传图片</i>
</el-upload>
// 上传之前的钩子
onBeforeUpload(file) {
// console.log(file)
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
if (!isJPG && !isPNG) {
this.$message.error("上传图片只能是 JPG/PNG 格式!");
}
return isJPG || isPNG;
},
// 自定义上传文件
uploadFile(file) {
console.log(file);
let form = new FormData();
// 后端接受参数 ,可以接受多个参数
form.append("file", file.file);
this.$post(
"/admin/sys-file/uploadImg",
form,
res => { },
err => {
this.$message.error(err.msg);
throw err;
}
);
},

// 移出之前钩子
before_remove(a, b) {
console.log(a, b);
// console.log( b.findIndex(item => item.uid == a.uid))
this.count = b.findIndex(item => item.url == a.url);
},
Vue使用element上传的更多相关文章
- vue 阿里云上传组件
vue 阿里云上传组件 Vue.js上传图片到阿里云OSS存储 测试项目git地址 本测试项目启动方法 示例链接 组件配置项 实践解释 本文主要介绍如何 在vue项目中使用web 直传方式上传阿里云o ...
- vue中el-upload上传多图片且携带参数,批量而不是一张一张的解决方案
现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了 ...
- springboot+vue实现文件上传
https://blog.csdn.net/mqingo/article/details/84869841 技术: 后端:springboot 前端框架:vue 数据库:mysql pom.xml: ...
- 关于vue使用form上传文件
在vue中使用form表单上传文件文件的时候出现了一些问题,获取文件的时候一直返回null, 解决之后又出现发送到后台的file文件后台显示为空,解决源码 <template> <d ...
- vue element-ui 文件上传
<el-upload class="upload-demo" action="" :before-remove="beforeRemove&qu ...
- Vue实现用户自定义上传头像裁剪
使用技术: vue.js2.0.cropperjs.canvas <template> <div id="app"> <div id=&q ...
- vue 封装组件上传img
var _uploadTemplate = '<div>'+ '<input type="file" name="file" v-on:cha ...
- vue.js异步上传文件前后端代码
上传文件前端代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q ...
- element 上传组件 el-upload 的经验总结
前言 最近在做后台管理项目,采用的 vue-element-admin ,上传图片是一个很常用的功能,也遇到了很多问题,刚好趁此机会做一些总结. 初步总结下会提到的问题,目录如下: el-upload ...
随机推荐
- pycharm中常见错误提示
1.类中定义函方法 PyCharm 提示Method xxx may be 'static': 原因:该方法不涉及对该类属性的操作,编译器建议声明为@staticmethod
- 推荐一款现代化的脚手架项目《hope-boot》
简介: > 一款现代化的脚手架项目.企业开发?接外包?赚外快?还是学习?这都能满足你,居家必备,值得拥有
- PHP的陷阱
PHP的陷阱 写代码的时候有个疑惑,那就是数组下标不存在的时候就会挂掉Undefined Index XXXX,这是对的,但是有时候他就不报错,这又是矛盾的. 请看下面的例子: $json_raw = ...
- JVM(2) Java内存溢出异常
在Java虚拟机运行时数据区中,除了程序计数器之外,虚拟机栈.本地方法栈.方法区和Java堆都有发生OutOfMemoryError(简称OOM)异常的可能. 一.Java堆溢出 Java堆用于存储对 ...
- vue-cli3安装jQuery
注:vue-cli3.0 没有了 webpack.config.js 配置文件,取而代之的是集合在 vue.config.js文件 内进行配置 默认已经安装好vue-cli3.0项目 step1:命令 ...
- Scrapy 框架入门简介
一.Scrapy框架简介 Scrapy 是用 Python 实现的一个为了爬取网站数据.提取结构性数据而编写的应用框架. Scrapy 常应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. ...
- 身份证号码验证算法(php和js实现)
原文:http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=21126994&id=3938244 http://www.jb ...
- InfluxDB常见疑问与解答 - 数据写入时如何在表级别指定保留策略
网友Siguoei:我想让一个库中不同的measurment能够指定不同的保存策略.而不是写入时使用数据库的默认保留策略. Answer:这个特性InfluxDB支持的,写入时序数据时,在行协议前加上 ...
- 解决SAP740 GUI 搜索帮助(F4)回填值乱码的问题
SAP 740客户端引入了搜索帮助增强功能,并且默认是开启该功能的,在带有F4搜索帮助的字段输入框中输入字段的前两个字符,可以自动以下拉框的方式带出包含包含所输入字符的条目,从而实现快速的输入帮助,如 ...
- Go netpoll I/O 多路复用构建原生网络模型之源码深度解析
导言 Go 基于 I/O multiplexing 和 goroutine 构建了一个简洁而高性能的原生网络模型(基于 Go 的I/O 多路复用 netpoll),提供了 goroutine-per- ...