<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. vue系列---Mustache.js模板引擎介绍及源码解析(十)

    mustache.js(3.0.0版本) 是一个javascript前端模板引擎.官方文档(https://github.com/janl/mustache.js) 根据官方介绍:Mustache可以 ...

  2. JavaWeb EL表达式 key为数值 Map取不到值

    JavaWeb  EL表达式 key为 Map取不到值 因为JSTL会把Integer,Byte,Short,Charactor都转成Long,这样就取不到值. 参见StackOverFlow的回答 ...

  3. 双系统开机引导菜单修复方法 进win7无须重启|metro引导|双系统菜单名字修改

    此文转自互联网,一部分是原创. 主要内容 1.修复双系统菜单(win7与win8双系统),进入win7不再需要重启,普通菜单样式(普通引导,非metro界面),更加简洁,实用,开机即可选择操作系统 2 ...

  4. 基于Java的开源爬虫框架WebCollector的使用

    一.WebCollector介绍 WebCollector是一个无须配置.便于二次开发的JAVA爬虫框架(内核),它提供精简的的API,只需少量代码即可实现一个功能强大的爬虫. WebCollecto ...

  5. Linux 提示符格式及颜色

    # 提示符颜色配置: 颜色  黑   红  绿  黄  青   紫  蓝  白 字体  30  31  32  33 34  35  36  37 背景  40  41  42  43 44  45 ...

  6. Linux读取外存

    Linux系统不像Windows系统那样,U盘自动识别,即插即用,Linux需要手动挂载U盘.步骤如下: 1.查看闪存: fdisk -l 2.添加挂载目录,一般放在/mnt下 mkdir /mnt/ ...

  7. 最常用 最完整 最清晰 的git使用命令大全!

    Git 常用命令 初始化项目步骤 mkdir WebApp //创建文件夹 cd WebApp //进入到该文件夹 git init //初始化 touch README //生成README git ...

  8. Unity中的优化技术

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/candycat1992/article/ ...

  9. Logstash 安装及简单实用(同步MySql数据到Elasticsearch)(Linux)

    1.下载logstash wget https://artifacts.elastic.co/downloads/logstash/logstash-6.6.0.tar.gz 2. 解压logstas ...

  10. MSF系列--MS17_010利用模块笔记

    1.   auxiliary/scanner/smb/smb_ms17_010      //扫描检测漏洞辅助模块 扫描结果这里可以看到 2,3,4这几台主机存在此漏洞! 2.     auxilia ...