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. 『Java』String类使用方法

    Java中的字符串 java.lang.String类表示字符串类,Java程序中所有字符串文字都可以看作实现该类的实例. 特点: 字符串不可变:字符串的值在创建后不能在发生改变 public cla ...

  2. 【笔记】scikit-learn中的PCA(真实数据集)

    sklearn中的PCA(真实的数据集) (在notebook中) 加载好需要的内容,手写数字数据集 import numpy as np import matplotlib.pyplot as pl ...

  3. clickhouse的windowFunnel(漏斗)

    1.WindowFunnel 关于官网的解释: Returned value:Integer. The maximum number of consecutive triggered conditio ...

  4. CobaltStrike去除流量特征

    CobaltStrike去除流量特征 ​普通CS没有做流量混淆会被防火墙拦住流量,所以偶尔会看到CS上线了机器但是进行任何操作都没有反应.这里尝试一下做流量混淆.参考网上的文章,大部分是两种方法,一种 ...

  5. S3C2440—6.串口的printf实现

    文章目录 一.框架 二.printf函数原理 2.1 printf的声明 2.2 参数解读 2.3 如何得到可变参数的值 2.4 解决变参的宏定义 2.5 完成printf函数的封装 三.结合UART ...

  6. Python爬虫(二)——发送请求

    1. requests库介绍 ​ 在python中有许多支持发送的库.比如:urlib.requests.selenium.aiohttp--等.但我们当前最常用的还是requests库,这个库是基于 ...

  7. C# 高级进阶(一)

    产品是怎样开发出来的 首先了解--产品MVP(Minimum Viable Product)的概念 最小可行产品--意思即开发最初应该是根据参品预期,最快构建出一个符合预期可行的功能合集,后期再通过用 ...

  8. [ASP.NET MVC]@RenderSection,@RenderBody(),@RenderPage

    1.@RenderBody()  作用和母版页中的服务器控件类似,当创建基于此布局页面的视图时,视图的内容会和布局页面合并,而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在标签之 ...

  9. python turtle的使用

    turtle.pendown() # 放下画笔  turtle.penup() # 抬起画笔  turtle.pensize(int) # 设置画笔宽度,值为整数型  turtle.forward(f ...

  10. Sublime Text3 显示左侧的目录树

    file->open folder选择一个文件夹,打开一个新窗口把原来的关掉 View->Sise Bar->Hide Side Bar就可以了