html:

<div id="app">
<div class="hello">
<div class="upload">
<div class="upload_warp">
<!-- 点击打开文件 -->
<div class="upload_warp_left" v-on:click="fileClick">
<img src="upload.png" alt="">
</div>
<!-- 点击打开文件 end -->
<!-- 将文件拖到此处 -->
<div class="upload_warp_right" v-on:drop="drop($event)" v-on:dragenter="dragenter($event)" v-on:dragover="dragover($event)">
或将文件拖到此处
</div>
<!-- 将文件拖到此处 end -->
</div>
<div class="clear"></div>
<!-- 图片 end -->
<!-- 这个是标签上的选择文件 -->
<input type="file" id="upload_file" multiple style="display: none;" v-on:change="fileChange($event)">
<div class="upload_warp_text">
选中{{imgList.length}}张文件,共{{bytesToSize(this.size)}}
</div>
<div class="upload_warp_img" v-show="imgList.length!=0">
<div class="upload_warp_img_div" v-for="(item,index) of imgList">
<div class="upload_warp_img_div_top">
<div class="upload_warp_img_div_text">
{{item.file.name}}
</div>
<img src="./del.png" class="upload_warp_img_div_del" @click="fileDel(index)">
</div>
<img :src="item.file.src">
</div>
</div>
</div>
</div>
</div>

css:

        .upload {
border: 1px solid #ccc;
background-color: #fff;
width: 650px;
box-shadow: 0px 1px 0px #ccc;
border-radius: 4px;
}
.hello{
width: 700px;
height: 240px;
/*border: 1px solid #999;*/
margin: 20px auto;
border-radius: 10px;
text-align: center;
}
.upload_warp{
padding: 20px;
}
.upload_warp_left{
width: 40%;
height: 150px;
border: 1px dashed #999;
float: left;
border-radius: 10px;
}
.upload_warp_left img{
margin-top: 45px;
}
.upload_warp_right{
width: 55%;
height: 150px;
line-height: 150px;
border: 1px dashed #999;
float: right;
border-radius: 10px;
color: #999;
}
.upload_warp_text{
height: 50px;
line-height: 50px;
border-top: 1px solid #999;
margin-top: 20px;
}
.clear{
clear: both;
}
.upload_warp_img {
border-top: 1px solid #D2D2D2;
padding: 14px 0 0 14px;
overflow: hidden
}
.upload_warp_img_div {
position: relative;
height: 100px;
width: 120px;
border: 1px solid #ccc;
margin: 0px 30px 10px 0px;
float: left;
line-height: 100px;
display: table-cell;
text-align: center;
background-color: #eee;
cursor: pointer;
}
.upload_warp_img_div img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.upload_warp_img_div_top {
position: absolute;
top: 0;
width: 100%;
height: 30px;
background-color: rgba(0, 0, 0, 0.4);
line-height: 30px;
text-align: left;
color: #fff;
font-size: 12px;
text-indent: 4px;
}
.upload_warp_img_div_del {
position: absolute;
top: 6px;
width: 16px;
right: 4px;
}

js:

new Vue({
el:'#app',
data(){
return{
imgList:[],
size: 0
}
},
methods:{
fileClick(){
document.getElementById('upload_file').click()
},
fileChange(el){
if (!el.target.files[0].size) return;
this.fileList(el.target.files);
el.target.value = ''
},
fileList(files){
for(let i = 0; i < files.length; i++){
this.fileAdd(files[i]);
}
},
// 添加
fileAdd(file){
this.size = this.size + file.size;
let reader = new FileReader();
reader.vue = this;
reader.readAsDataURL(file);
reader.onload = function (){
file.src = this.result;
this.vue.imgList.push({
file
});
}
},
// 删除
fileDel(index){
this.size = this.size - this.imgList[index].file.size;
this.imgList.splice(index,1);
},
// 容量的多少
bytesToSize(bytes){
if(bytes === 0) return '0 B';
let k = 1000,
sizes = ['B','KB','MB','GB','TB','PB','EB','ZB','YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return (bytes / Math.pow(k,i)).toPrecision(3) + ' ' + sizes[i];
},
dragenter(el){
el.stopPropagation();
el.preventDefault();
},
dragover(el){
el.stopPropagation();
el.preventDefault();
},
drop(el){
el.stopPropagation();
el.preventDefault();
this.fileList(el.dataTransfer.files);
}
}
})

vue.js框架图片上传组件的更多相关文章

  1. vue图片上传组件

    前言:很多项目中都需要用到图片上传功能,而其多处使用的要求,为了避免重复造轮子,让我决定花费一些时间去深入了解,最终封装了一个vue的图片上传组件.现将总结再次,希望有帮助. Layout <d ...

  2. 用Vue来实现图片上传多种方式

    没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element ...

  3. Jquery图片上传组件,支持多文件上传

    Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...

  4. H5拍照、选择图片上传组件核心

    背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...

  5. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

  6. 基于Node的React图片上传组件实现

    写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循R ...

  7. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  8. 分享一个react 图片上传组件 支持OSS 七牛云

    react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能 需要 react 版本大于 v ...

  9. html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

随机推荐

  1. 一、Ocelot简单概述

    以下只是本人学习过程的整理 Ocelot官网:http://threemammals.com/ocelot 说明文档:https://ocelot.readthedocs.io/en/latest/ ...

  2. IOC(概念和原理)

    什么是 IOC (1)控制反转,把对象创建和对象之间的调用过程,交给 Spring 进行管理 (2)使用 IOC 目的:为了耦合度降低 (3)做入门案例就是 IOC 实现 IOC 底层原理 xml 解 ...

  3. 面试官:实现一个带值变更通知能力的Dictionary

    如题, 你知道字典KEY对应的Value什么时候被覆盖了吗?今天我们聊这个刚性需求. 前文提要: 数据获取组件维护了业务方所有(在用)的连接对象,DBA能在后台无侵入的切换备份库. 上文中:DBA在为 ...

  4. Golang语言系列-16-context上下文

    context上下文 控制子goroutine退出 全局变量方式 package main import ( "fmt" "sync" "time&q ...

  5. DVWA-全等级暴力破解

    之前写了dvwa的sql注入的模块,现在写一下DVWA的其他实验步骤: 环境搭建参考:https://www.freebuf.com/sectool/102661.html DVWA简介 DVWA(D ...

  6. SQL 练习5

    查询平均成绩大于等于 60 分的同学的学生编号和学生姓名和平均成绩 SELECT Student.SId,Sname,t.[平均成绩] from Student , (SELECT sid , AVG ...

  7. tcp为什么要三次握手,tcp为什么可靠

    转自 : https://www.cnblogs.com/LUO77/p/5771237.html大体看过,没有深入研究,有需要时继续看. 为什么不能两次握手:(防止已失效的连接请求又传送到服务器端, ...

  8. mfc HackerTools监控键盘按键

    string GetKey(int Key) { string KeyString = ""; //判断符号输入 const int KeyPressMask = 0x800000 ...

  9. Java String 综述(上篇)

    摘要: Java 中的 String类 是我们日常开发中使用最为频繁的一个类,但要想真正掌握的这个类却不是一件容易的事情.笔者为了还原String类的真实全貌,先分为上.下两篇博文来综述Java中的S ...

  10. 虚拟dom?diff算法?key?Vue原理的核心三问?打包教你搞定。

    为什么需要虚拟DOM 先介绍浏览器加载一个HTML文件需要做哪些事,帮助我们理解为什么我们需要虚拟DOM.webkit引擎的处理流程,如下图所示: 所有浏览器的引擎工作流程都差不多,如上图大致分5步: ...