项目需求要求用户上传商品的时候可以一次性上传9张图,多余9张提示‘只能上传9张图’,并且每张图右上角有个删除按钮,图片也可以点击放大。

出来的效果图如下:

话不多说,上代码:

  <el-form-item label="商品清单/设计图纸:">
<div class="showImg">
<ul>
<li v-for="(item,index) in showImgsrc" :key="index" style="position: relative">
<img :src=item alt="">
<span style=" position: absolute;
top: -5px;
right: -5px;
background: rgb(223, 6, 21);
color: rgb(255, 255, 255);
text-align: center;
line-height: 20px;
font-size: 12px;
width: 20px;
height: 20px;
cursor: pointer;
border-radius: 30px;" @click="clearImg(index)">X</span>
</li>
<li v-if="showImgsrc.length<9">
<div class="uploadImgBtn" id="uploadImgBtn" style="text-align: center">
<span style="display:inline-block;margin:30px auto;font-size: 30px;color: #e5e5e5">
<img src="@/assets/images/addImg.png" alt="">
</span>
<input type="file" @change="uploadImg($event)" class="uploadImg" multiple>
</div>
<span style="font-size: 12px;position: absolute">已上传({{showImgsrc.length}}/9)</span>
</li>
</ul>
</div>
</el-form-item>

方法如下:

  uploadImg(e){
let that=this;
let imgFiles=e.target.files;
console.log(e.target.files.length);
if(e.target.files.length+that.showImgsrc.length>=10){
this.showDialog=true;
this.contentText='您最多只能上传9张图片,请重新上传!'
}else{
for( var i = 0 ; i < imgFiles.length ; i++ ){
var fr = new FileReader();
fr.onload = function(e){
that.showImgsrc.push(this.result);
}
fr.readAsDataURL(imgFiles[i]);//读取文件
}
}
}

删除图片:

  clearImg(index){
this.showImgsrc.splice(index,1);
},

功能逻辑很简单:就是声明一个空数组showImgSrc,当用户当张图上传的时候,循环图片然后push到showImgSrc空数组里面。最后ul li九宫格显示showImgSrc里的图片。

vue 仿微信朋友圈9张图上传功能的更多相关文章

  1. Android 仿微信朋友圈拍小视频上传到服务器

    这个接上一个写的实现拍小视频和传到服务器的  界面是这个样子滴. 我也知不知道怎么给图片搞小一点o(╯□╰)o 布局文件是这样的[认真脸] <?xml version="1.0&quo ...

  2. PHP GD库---之微信朋友圈9张图

    $item_pic = "img/item.jpg"; list($width, $height) = getimagesize($item_pic); $item_pic = i ...

  3. Android 仿微信朋友圈发动态功能(相册图片多选)

    代码分享 代码名称: 仿微信朋友圈发动态功能(相册图片多选) 代码描述: 仿微信朋友圈发动态功能(相册图片多选) 代码托管地址: http://www.apkbus.com/android-15276 ...

  4. Android 仿微信朋友圈添加图片

    github地址(欢迎下载Demo) https://github.com/zhouxu88/WXCircleAddPic 老习惯,先上图,着急用的朋友,直接带走Demo,先拿来用吧,毕竟老板催的紧, ...

  5. Android NineGridLayout — 仿微信朋友圈和QQ空间的九宫格图片展示自定义控件

    NineGridLayout 一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件. GitHub:https://github.com/HMY314/NineGridLayout 一.介绍 1.当只 ...

  6. 微信jssdk,实现多图上传的一点心得

    一.首先在common.js里封装一个函数,在需要调用jsSDK的页面引用此方法即可实现微信的信息配置function signatureJSSDK() { var url = window.loca ...

  7. hdjs---laravel 框架使用hdjs 实现多图上传功能

    hdjs---laravel 框架使用hdjs 实现多图上传功能 一.总结 一句话总结: [在网上找hdjs的使用实例]和[能遇见讲hdjs的视频],也是完全搞懂hdjs的不错的方式 1.hdjs中的 ...

  8. Android 高仿微信朋友圈动态, 支持双击手势放大并滑动查看图片。

    转载请注明出处:http://blog.csdn.net/sk719887916/article/details/40348873 作者skay: 最近参与了开发一款旅行APP,其中包含实时聊天和动态 ...

  9. 如何利用Python网络爬虫抓取微信朋友圈的动态(上)

    今天小编给大家分享一下如何利用Python网络爬虫抓取微信朋友圈的动态信息,实际上如果单独的去爬取朋友圈的话,难度会非常大,因为微信没有提供向网易云音乐这样的API接口,所以很容易找不到门.不过不要慌 ...

随机推荐

  1. LuaSocket 学习笔记

    --- LUA SocketLib 和 协程 前言: 这是一篇译文(The LUA SocketLib and the Coroutines),有删改,原文见下方链接. 简介 目标读者:会使用 LUA ...

  2. tcp客户端程序开发

    https://www.cnblogs.com/python-No/ 话不多说,直接进入正题 一:客户端一共分为5大块: 1.创建客户端套接字 2.和服务端套接字建立连接 3.发送数据 4.接收发送 ...

  3. Node.js实现图片上传功能

    node接口实现 const express = require('express') const mysql = require('mysql') const cors = require('cor ...

  4. [专题总结]初探插头dp

    彻彻底底写到自闭的一个专题. 就是大型分类讨论,压行+宏定义很有优势. 常用滚动数组+哈希表+位运算.当然还有轮廓线. Formula 1: 经过所有格子的哈密顿回路数. 每个非障碍点必须有且仅有2个 ...

  5. SpringCloud 服务间互相调用 @FeignClient注解

    SpringCloud搭建各种微服务之后,服务间通常存在相互调用的需求,SpringCloud提供了@FeignClient 注解非常优雅的解决了这个问题 首先,保证几个服务都在一个Eureka中注册 ...

  6. Cypress 之 环境配置

    将项目添加到cypress时,cypress.json会在项目中创建一个文件,此文件用于存储projectId,以及你提供的任何配置项. { "projectId": " ...

  7. 搭建SSM框架的配置文件

    pom.xml所需要的基本依赖和插件: <dependency>            <groupId>org.mybatis</groupId>         ...

  8. SSM框架之Mybatis(6)动态SQL

    Mybatis(6)动态SQL 1.动态SQL 出现原因:有些时候业务逻辑复杂时,我们的 SQL 是动态变化的,此时在前面的学习中我们的 SQL 就不能满足要求了 1.1.if标签 我们根据实体类的不 ...

  9. Flutter 基础控件

    内容: Button Image.Icon Switch.Checkbox TextField Form 1.Button RaisedButton 漂浮按钮 FlatButton 扁平按钮 Outl ...

  10. 框架用多了真的会死人的,spring-cloud全家桶与mybitais 集成完整示例(附下载)

    ​ 题外话: 看到这一长串包含各种技术名词的标题,一路走来感觉研发深深的被各种框架给绑架了,从我们刚出生最简单的jsp,servlet打天下,到spring mvc的盛行,再到现在spring-boo ...