<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上传的更多相关文章

  1. vue 阿里云上传组件

    vue 阿里云上传组件 Vue.js上传图片到阿里云OSS存储 测试项目git地址 本测试项目启动方法 示例链接 组件配置项 实践解释 本文主要介绍如何 在vue项目中使用web 直传方式上传阿里云o ...

  2. vue中el-upload上传多图片且携带参数,批量而不是一张一张的解决方案

    现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了 ...

  3. springboot+vue实现文件上传

    https://blog.csdn.net/mqingo/article/details/84869841 技术: 后端:springboot 前端框架:vue 数据库:mysql pom.xml: ...

  4. 关于vue使用form上传文件

    在vue中使用form表单上传文件文件的时候出现了一些问题,获取文件的时候一直返回null, 解决之后又出现发送到后台的file文件后台显示为空,解决源码 <template> <d ...

  5. vue element-ui 文件上传

    <el-upload class="upload-demo" action="" :before-remove="beforeRemove&qu ...

  6. Vue实现用户自定义上传头像裁剪

    使用技术: vue.js2.0.cropperjs.canvas <template>   <div id="app">     <div id=&q ...

  7. vue 封装组件上传img

    var _uploadTemplate = '<div>'+ '<input type="file" name="file" v-on:cha ...

  8. vue.js异步上传文件前后端代码

    上传文件前端代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q ...

  9. element 上传组件 el-upload 的经验总结

    前言 最近在做后台管理项目,采用的 vue-element-admin ,上传图片是一个很常用的功能,也遇到了很多问题,刚好趁此机会做一些总结. 初步总结下会提到的问题,目录如下: el-upload ...

随机推荐

  1. 12.Linux重定向与管道|

    1.重定向概述 1.1什么是重定向 将原本要输出到屏幕的数据信息,重新定向到某个指定的文件中 名称 文件描述符 作用 标准输入(STDIN) 0 默认是键盘,也可以是文件或其他命令的输出. 标准输出( ...

  2. Arduino学习笔记② Arduino语言基础

    授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...

  3. Kafka消费者 从Kafka中读取数据并写入文件

    Kafka消费者 从Kafka中读取数据 最近有需求要从kafak上消费读取实时数据,并将数据中的key输出到文件中,用于发布端的原始点进行比对,以此来确定是否传输过程中有遗漏数据. 不废话,直接上代 ...

  4. (day30)GIL + 线程相关知识点

    目录 昨日内容 进程互斥锁 队列 进程间通信 生产者与消费者模型 线程 什么是线程 为什么使用线程 创建线程的两种方式 线程对象的属性 线程互斥锁 今日内容 GIL全局解释器锁 多线程的作用 计算密集 ...

  5. python小例子(三)

    1.提高Python运行速度的方法 (1)使用生成器,节约大量内存: (2)循环代码优化,避免过多重复代码的执行: (3)核心模块使用cpython,pypy等: (4)多进程,多线程,协程: (5) ...

  6. cacti1.2.7安装教程+Centos7|Cacti1.2.x+Centos7+Spine1.2.7零基础手把手教学

    cacti1.2.7安装教程+Centos7|Cacti1.2.x+Centos7+Spine1.2.7零基础手把手教学 教程地址: 链接:http://note.youdao.com/notesha ...

  7. 如何在Vue-cli项目中使用JTopo

    1.前言 jTopo(Javascript Topology library)是一款完全基于HTML5 Canvas的关系.拓扑图形化界面开发工具包.其体积小,性能优异,由一群开发爱好者来维护.唯一感 ...

  8. P4873 [USACO14DEC] Cow Jog_Gold 牛慢跑(乱搞?二分?)

    (话说最近写的这类题不少啊...) 化简:给定数轴上一系列点,向正方向移动,点不能撞在一起,如果碰到一起就需要放到另外一行,求要多少行才能满足所有点不相撞的条件. (被标签误解,老是想到二分答案... ...

  9. 正睿OI集训游记

    什么嘛....就是去被虐的... 反正就是难受就是了.各种神仙知识点,神仙题目,各式各样的仙人掌..... 但是还是学会了不少东西...... 应该是OI生涯最后一次集训了吧.... 这次的感言还是好 ...

  10. p1594(巨坑题!!!)

    护卫车队在一条单行的街道前排成一队,前面河上是一座单行的桥.因为街道是一条单行道,所以任何车辆都不能超车.桥能承受一个给定的最大承载量.为了控制桥上的交通,桥两边各站一个指挥员.护卫车队被分成几个组, ...