效果:

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

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

代码:

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. foreach的异步(async,await)的问题及其处理方式

    开发中遇见个难题很苦恼,好在我解决了,只要能解决我就很开心 本篇文章从forEach方法 到promise 到async await统统理解个遍,进入正题 先看下面代码会出现什么问题: const a ...

  2. 【Frida】调试js代码

    方法一attach启动 js代码动态注入app,app需要保持运行状态 # coding: utf-8 import sys import frida app_name = "猿人学APP& ...

  3. Lua中创建新的文件夹

    如下: os.execute('mkdir 文件夹名称')

  4. word生成产生错误的原因

    技术背景 很多时候我们网站或者系统需要提供一些word文件,例如证明.docx或者订单.docx等文件供用户下载打印等. 用Java操作word文档,毫无疑问,当下最流行apache poi,对于po ...

  5. pytest(5)-自定义用例顺序(pytest-ordering)-后续学习

    前言 测试用例在设计的时候,我们一般要求不要有先后顺序,用例是可以打乱了执行的,这样才能达到测试的效果. 有些同学在写用例的时候,用例写了先后顺序, 有先后顺序后,后面还会有新的问题(如:上个用例返回 ...

  6. Spark 中三种数据处理对象的区别: RDD-Dataset-Dataframe

    1,对比表:   RDD Dataframe Dataset 版本 1.0 1.3 1.6 描述 分布式数据集合 行列化的分布式数据集合  RDD 和 DataFrame的结合 数据格式 结构化和非结 ...

  7. python中如果获取对象的内存地址,及字典的地址

    在python中,如果查看一个对象的内存地址,可以用到id这个内置函数:使用方式是: id(object)--->返回该对象的10进制的内存地址: 以下是官方定义:翻译为大白话就是,返回一个对象 ...

  8. [部署日记]GO在Visual Studio Code初次运行时提示The "gopls" command is not available. Run "go get -v golang.org/x/tools/gopls" to install.

    本以为VSC在商城装上插件后就能拎包入住,F5的时候我当场好家伙 于是无脑Install... Installing github.com/nsf/gocode FAILED Installing g ...

  9. 监控可视化nagios xi

    官网下载 https://www.nagios.com/downloads/nagios-xi/linux/ 也可以手动下载解压并安装 cd /tmp wget https://assets.nagi ...

  10. centos更改java的环境变量

    vi  /etc/profile 在最后添加这个信息,或修改这些信息 export JAVA_HOME=/usr/local/java/jdk1.8.0_251export CLASSPATH=.:$ ...