elm上传图片,只能上传一张,隐藏+上传框
效果:
上传后,隐藏+号,禁止继续上传;
移除当前已上传的后,重新显示+号,可以继续上传;


代码:

css : 隐藏上传的 + 号

变量:

方法:
// 上传成功时,让+号隐藏,不能再继续上传
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上传图片,只能上传一张,隐藏+上传框的更多相关文章
- #添加图片,最多只能上传9张.md
#添加图片,最多只能上传9张.md 前端页面: ```javascript <form id="imgForm" enctype="multipart/form-d ...
- 微信jssdk上传图片,一张一张的上传 和 一次性传好几张
//html模板 <div class="zhaopin_3_2"> <div id="bbb"></div> <im ...
- SpringBoot图片上传(四) 一个input上传N张图,支持各种类型
简单介绍:需求上让实现,图片上传,并且可以一次上传9张图,图片格式还有要求,网上找了一个测试了下,好用,不过也得改,仅仅是实现了功能,其他不尽合理的地方,还需自己打磨. 代码: //html<d ...
- MVC下form表单一次上传多种类型的图片(每种类型的图片可以上传多张)
form表单一次上传多种类型的图片(每种类型的图片可以上传多张) controller中的action方法 public ActionResult UploadImage( ) { in ...
- 微信sdk 图片上传 两种方法 上传一张显示一张 并附带微信图片放大功能和删除功能
html <!--上传图片--> <div class="upload-mod"> <div class="up-box" id= ...
- ajax 提交所有表单内容及上传图片(文件),以及单独上传某个图片(文件)
我以演示上传图片为例子: java代码如下(前端童鞋可以直接跳过看下面的html及js): package com.vatuu.web.action; import java.io.File; imp ...
- vue 仿微信朋友圈9张图上传功能
项目需求要求用户上传商品的时候可以一次性上传9张图,多余9张提示‘只能上传9张图’,并且每张图右上角有个删除按钮,图片也可以点击放大. 出来的效果图如下: 话不多说,上代码: <el-form- ...
- ueditor富文本上传图片的时候报错"未找上传数据"
最近因为需求所以在ssh项目中使用了Ueditor富文本插件,但是在上传图片的时候总是提示“未找到上传数据”,之后百度了好久终于弄明白了.因为Ueditor在上传图片的时候会访问controller. ...
- 使用ajax上传图片,并且使用canvas实现出上传进度效果
前端代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> &l ...
- 上传几张.NET5之后的机器人logo
上传几张.NET5之后的机器人logo
随机推荐
- vue封装全局确认弹窗
下载文件1.弹窗组件 <template> <view class="bombFrame" v-if="bshow" :class=" ...
- vue 数组对象深拷贝 并根据某项属性排序
vue 数组对象深拷贝 并根据某项属性 serialNumber 排序 原始数据 navListData: [ { name: '企业速览', isHot: false, isVip: fals ...
- 浏览器渲染与event loop
线程 1.GUI渲染线程(一个) 2.JS引擎线程(一个) 3.事件触发线程 4.定时器触发线程(多个) 5.异步http请求线程(多个) 线程执行 页面加载时 GUI渲染引擎和JS执行引擎互斥,当G ...
- Java-封装结果集示例
1 @Data 2 public class ResultData implements Serializable { 3 4 /** 5 * 状态码 6 */ 7 private String co ...
- VS Code第一部分--创建
第一步:Win键+R cmd 打开之后 输入 vue ui 运行结束后 会显示一个仪表盘页面 点击左下方的更多 点击项目管理器 点击创建 输入自己创建的文件夹地址 按回车保存 点击下方的创建 ...
- CSP202104-4 校门外的树
设状态时,首先从简单状态设起: 一维不行再试二维.简单状态应付不了再设复杂的(因为某些状态可以体现在状态转移的过程中,或者说状态转移方程中,不一定体现在原式中) E.g. 计算机软件能力认证考试系统- ...
- vs MFC c++ rc文件的dilog打不开,显示加载失败
最近在做一个项目,在vs2012上面用mfc画界面,由于没有确定好且不熟悉这个架构,控件类型变了又变,本人又是个有点强迫症的性格所以删掉了一些不用的控件,导致的结果就是上面说的,dialog打不开报加 ...
- 我常用的Linux快捷命令
alias 设置快捷自定义命令 语法: alias 快捷命令='完整命令' 因为可以直接把上述当成一条语句来执行,但是服务器重启之后会失效,被称为临时快捷命令: 但是!将他写入 ~/.bashrc 文 ...
- docker+react+nginx部署
一.准备工作 1.先确保项目可以正常运行. 2.如果拉代码到Linux下进行打包,注意node版本,我就是版本不同,yarn build一直不成功. 3.找一个nginx的配置文件nginx.conf ...
- 多数元素II
给定一个大小为 n 的整数数组,找出其中所有出现超过 ⌊ n/3 ⌋ 次的元素. /** * @param {number[]} nums * @return {number[]} */ const ...