vue.js框架图片上传组件
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框架图片上传组件的更多相关文章
- vue图片上传组件
前言:很多项目中都需要用到图片上传功能,而其多处使用的要求,为了避免重复造轮子,让我决定花费一些时间去深入了解,最终封装了一个vue的图片上传组件.现将总结再次,希望有帮助. Layout <d ...
- 用Vue来实现图片上传多种方式
没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element ...
- Jquery图片上传组件,支持多文件上传
Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...
- H5拍照、选择图片上传组件核心
背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...
- 微信小程序简单封装图片上传组件
微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...
- 基于Node的React图片上传组件实现
写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循R ...
- js实现图片上传预览及进度条
原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...
- 分享一个react 图片上传组件 支持OSS 七牛云
react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能 需要 react 版本大于 v ...
- html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题
先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...
随机推荐
- k8s强制删除资源
一般强制删除 kubernetes 的资源: kubectl delete <resource> <resourename> --grace-period=0 --force ...
- CTF_论剑场_Web20
直接上脚本,多跑几次就能出flag import requests import re url = "http://123.206.31.85:10020/" s = reques ...
- Bugku-你必须让他停下来
这道题使用burpsuite抓包就能做,一开始抓包发到repeater之后flag不一定可以直接得到,原因是flag藏在特定的那张图片后面,我们一直go到那张图片便可以得到flag. 进入题目给的网址 ...
- IntelliJ IDEA 中为Maven 配置阿里云镜像源
idea中查看位置,应该都是一样的这个位置 在此位置下新建一个.xml文件 内容如下: <?xml version="1.0" encoding="UTF-8&qu ...
- String s="a"+"b"+"c",到底创建了几个对象?
首先看一下这道常见的面试题,下面代码中,会创建几个字符串对象? String s="a"+"b"+"c"; 如果你比较一下Java源代码和反 ...
- Docker部署Jenkins 2.285版持续部署集成实践(1)
抓取Jenkins镜像 docker pull jenkins/jenkins 创建映射本地路径: 运行Jenkins实例 docker for windows: docker run -it -p ...
- MySQL记录之间是单向链表还是双向链表?
前言 本文的观点是基于MySQL使用Innodb存储引擎的情况下进行的! 很多渠道说:MySQL数据按照主键大小依次排列,记录之间是双向链表连起来.如果说我告诉你这种说法很大程度上是错的,你肯定说我在 ...
- C#给线程传递数据
目录 0. 前情说明 1. ParameterizedThreadStart类型的委托 2. 使用自定义类 3. 使用Lambda表达式 4. 参考以及文中源代码下载 shanzm-2021年8月24 ...
- 模拟7 T3 寿司题解
题目要求可以转化成一个01串,让通过最少次数把序列变成中间是0,两端是1: 首先我们可以考虑一些性质: 最优解一定是每次操作都把0和1交换 这个很好理解,如果你交换同一种东西,跟没换一样 这个题卡就卡 ...
- noip 模拟4
咕 题都改不完怎么可能有空写题解啊啊啊