效果:

上传后,隐藏+号,禁止继续上传;

移除当前已上传的后,重新显示+号,可以继续上传;

代码:

css : 隐藏上传的 + 号

变量:

注:
利用 hideUpload 控制 + 号的css
 
pngFilesList 为图片默认列表,(用于编辑时回显图片)

方法:

  // 上传成功时,让+号隐藏,不能再继续上传
  pngUpSuccess (response, file, fileList) {
this.ruleForm.pngUrl = response.data.path
this.hideUpload = true
this.$store.dispatch('setLoading', false)
},
pngUpError (file, fileList) {
this.$store.dispatch('setLoading', false)
},
  // 上传前限制类型和大小
pngBeforeUpload (file) {
this.$store.dispatch('setLoading', true)
const isPNG = file.type === 'image/png'
const isJPG = file.type === 'image/jpeg'
const isJPEG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isPNG && !isJPG && !isJPEG) {
this.$message({
message: '不接受此文件类型!',
type: 'error',
showClose: true
})
this.$refs.uploadpng.clearFiles()
this.$store.dispatch('setLoading', false)
return false
}
if (!isLt2M) {
this.$message({
message: '图片大小不能超过2M',
type: 'error',
showClose: true
})
this.$refs.uploadpng.clearFiles()
this.$store.dispatch('setLoading', false)
return false
}
},
   // 移除文件后重新让 + 号 显示
pngonRemove () {
this.ruleForm.pngUrl = ''
this.hideUpload = false
},

elm上传图片,只能上传一张,隐藏+上传框的更多相关文章

  1. #添加图片,最多只能上传9张.md

    #添加图片,最多只能上传9张.md 前端页面: ```javascript <form id="imgForm" enctype="multipart/form-d ...

  2. 微信jssdk上传图片,一张一张的上传 和 一次性传好几张

    //html模板 <div class="zhaopin_3_2"> <div id="bbb"></div> <im ...

  3. SpringBoot图片上传(四) 一个input上传N张图,支持各种类型

    简单介绍:需求上让实现,图片上传,并且可以一次上传9张图,图片格式还有要求,网上找了一个测试了下,好用,不过也得改,仅仅是实现了功能,其他不尽合理的地方,还需自己打磨. 代码: //html<d ...

  4. MVC下form表单一次上传多种类型的图片(每种类型的图片可以上传多张)

    form表单一次上传多种类型的图片(每种类型的图片可以上传多张) controller中的action方法 public ActionResult UploadImage( )        { in ...

  5. 微信sdk 图片上传 两种方法 上传一张显示一张 并附带微信图片放大功能和删除功能

    html <!--上传图片--> <div class="upload-mod"> <div class="up-box" id= ...

  6. ajax 提交所有表单内容及上传图片(文件),以及单独上传某个图片(文件)

    我以演示上传图片为例子: java代码如下(前端童鞋可以直接跳过看下面的html及js): package com.vatuu.web.action; import java.io.File; imp ...

  7. vue 仿微信朋友圈9张图上传功能

    项目需求要求用户上传商品的时候可以一次性上传9张图,多余9张提示‘只能上传9张图’,并且每张图右上角有个删除按钮,图片也可以点击放大. 出来的效果图如下: 话不多说,上代码: <el-form- ...

  8. ueditor富文本上传图片的时候报错"未找上传数据"

    最近因为需求所以在ssh项目中使用了Ueditor富文本插件,但是在上传图片的时候总是提示“未找到上传数据”,之后百度了好久终于弄明白了.因为Ueditor在上传图片的时候会访问controller. ...

  9. 使用ajax上传图片,并且使用canvas实现出上传进度效果

    前端代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> &l ...

  10. 上传几张.NET5之后的机器人logo

    上传几张.NET5之后的机器人logo

随机推荐

  1. 渗透H5棋牌游戏-棋牌游戏开发

    0x01 前言 本來不想发的,涉及太多利益了,這些棋牌游戏的源码最高能卖到几万.开发起来不比一个商场进程难. 最近又太忙了,沒时间去做代码审计的文章了,但一不小心又抢了个运气王... 0x02 开始 ...

  2. SpringCloud之配置中心(config)的使用

    配置中心的作用就在于可以在项目启动时加载远程或本地的配置文件,将配置文件集中管理 springboot版本: 2.1.6.RELEASE springcloud版本: Finchley.RELEASE ...

  3. CH582m串口透传程序

    目录 参考了沁恒官网22年1月更新的CH583EVT包中的UART1例程 功能:上位机通过串口1发送指令规定串口2和3的波特率,实现串口2和3之间的数据透传 担心串口3的接收中断会被串口2的发送中断打 ...

  4. 二叉树TwT

    L2-011 玩转二叉树 给定一棵二叉树的中序遍历和前序遍历,请你先将树做个镜面反转,再输出反转后的层序遍历的序列.所谓镜面反转,是指将所有非叶结点的左右孩子对换.这里假设键值都是互不相等的正整数. ...

  5. java8 stream 常用操作

    遍历 // list 遍历,stream() 可省略 list.stream().forEach(e -> { }); // map 遍历 map.forEach((k,v) -> { } ...

  6. 【windows】 进程间通信 WM_COPYDATA消息

    WM_COPYDATA消息可以实现window应用程序之间的数据传输,是同步传输方式. 需要用到结构体 COPYDATASTRUCT typedef struct tagCOPYDATASTRUCT ...

  7. OS-lab4

    OS-lab4 系统调用 系统调用的流程 按照上述的流程逐个分析. user/syscall_lib.c 这个文件位于user文件夹下,也就是用户程序可以调用的函数,相当于操作系统提供给用户程序的一些 ...

  8. 原始的jdbc

    jdbc的概念 什么是jdbc? jdbc是java数据库连接.为多种关系型数据库提供统一的访问. jdbc的操作步骤 导入jar包 加载驱动 获取数据库连接 获取执行者对象 执行SQL语句 处理结果 ...

  9. 16.java八皇后问题

    问题描述:在 8×8 格的国际象棋上摆放八个皇后,使其不能互相攻击,即: 任意两个皇后都不能处于同一行 .同一列或同一斜线上,问有多少种摆法(92). 思路分析:1) 第一个皇后先放第一行第一列2) ...

  10. VMware Workstation Ubuntu 20.04 LTS无法连接网络问题

    本文记录了自己使用的安装在VMware Workstation上的Ubuntu20.04无法连接到网络的解决过程--终于解决困扰我两个小时的问题 出现问题# 毫无征兆,平时使用正常的Ubuntu在今天 ...