<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. 02jmeter-函数助手使用

    示例:__Random函数 1.打开函数助手,并按提示写入value 2.引用.复制出${__Random(1,99,gp)}放到需要引用的地方 3.请求成功后可通过debug sampler查看变量 ...

  2. spark版本定制课程-第1课

    spark版本定制课程-第1课 1.学习本课程可以自己动手改进spark,或者给spark增加功能.增加某些官方没有提供的功能,通过本课程希望早就一些顶级spark专家,根据整个社会的需要对spark ...

  3. spark上 spark-shell和java -jar访问hdfs路径问题

    部署spark集群 使用spark包 spark-1.0.2-bin-hadoop2.tgz 在spark-shell和java -jar访问hadoop hdfs上的文件写法是有区别的 在spark ...

  4. 手动部署 Docker+Grafana+Prometheus系统监控之Redis

    监控规划图 使用Docker 创建两台Redis docker run -d --name redis1 redis docker run -d --name redis2 redis 查看redis ...

  5. 嗜血的硅谷与Hygge的欧洲

    听到太多抱怨工作累,加班多,996的声音.我们是否从底层来理智的分析这一过程.那些抱怨加班多.996的人有多少离开了那个让他发声的工作,去找一份轻松悠闲的工作度日? 我们是一边抱怨着工作,一边担心着离 ...

  6. vue-cli2、vue-cli3脚手架详细讲解

    前言: vue脚手架指的是vue-cli它是vue官方提供的一个快速构建单页面(SPA)环境配置的工具,cli 就是(command-line-interface  ) 命令行界面 .vue-cli是 ...

  7. ArcGIS Engine专题地图渲染器的实现(入门版)

    专题地图(Thematic Map)是着重表示一种或数种自然要素特征或社会经济现象的地图 专题地图的内容由两部分构成: 1.专题内容——图上突出表示的自然或社会经济现象及其有关特征 2.地理基础——用 ...

  8. Python 依赖库管理哪家强?pipreqs、pigar、pip-tools、pipdeptree 任君挑选

    在 Python 的项目中,如何管理所用的全部依赖库呢?最主流的做法是维护一份"requirements.txt",记录下依赖库的名字及其版本号. 那么,如何来生成这份文件呢?在上 ...

  9. unity 动画 音频播放

    采用Unity进行音频动画的播放时最常用的技术,在此进行一下简单讲解与应用. (一)动画播放(本文采用animation进行验证,关于animation和animator区别可问度娘,在此不做赘述) ...

  10. zookeeper+springboot+dubbo简单实现

    第一步:在虚拟机中搭建zookeeper. 第二步:本地创建3个maven工程,分别为wxh-dubbo-api(对外暴露的接口),wxh-dubbo-provider(服务提供者,接口的具体实现), ...