vue 拍照上传图片 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimum-scale=1.0">
<title></title>
<!-- <script type="text/javascript" src="http://www.xxiaoyuan.top/jquery-1.9.1.js"></script> -->
<style>
/* 拍照 上传图片--------------------------------- */
.pic_question{
padding: 0 .48rem
}
.add-img{
margin-top: 0.4rem
}
.add-image {
width: 3.26rem;
height: 3.26rem;
margin-right: 0.2rem;
position: relative;
border: 1px solid #ccc;
}
.add-image i.icon-shangchuantupian{
font-size: 3.26rem;
line-height: 3.4rem;
width: 3.26rem;
height: 3.26rem;
position: absolute;
bottom: 1px;left: 0;
color: #666
}
.add-image p{
font-size: .52rem;
color: #666;
position: absolute;
bottom: .1rem;left: 0;
width: 3.26rem;
}
.img-list{
display: flex;
flex-wrap:wrap
}
.img-list>li{
width: 3.26rem;
height: 3.26rem;
position: relative;
margin-right: 0.2rem;
margin-bottom: 0.2rem
}
.img-list>li .del{
position: absolute;
top: 0;
right: 0;
color: #000
}
.img-list>li>img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 拍照上传图片 -->
<div class="pic_question" id="vm">
<!-- 影藏上传图片input -->
<input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>
<div class="add-img">
<!-- <p class="font14">图片(最多6张，还可上传<span v-text="6-imgList.length"></span>张</p> -->
<ul class="img-list">
<div class="add" @click="chooseType">
<div class="add-image" align="center">
<!-- <i class="iconfont icon-shangchuantupian"></i> -->
<p class="font13">图片</p>
</div>
</div>
<li v-for="(url,index) in imgList">
<!-- 删除图片 -->
<span class="del iconfont icon-guanbi" @click.stop="delImg(index)">X</span>
<!-- 显示图片 -->
<img :src="url.file.src">
</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="http://www.xxiaoyuan.top/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#vm",
data:{
imgList: [],
size: 0,
limit:6, //限制图片上传的数量
tempImgs:[]
},
methods: {
chooseType() {
document.getElementById('upload_file').click();
},
fileChange(el) {
if (!el.target.files[0].size) return;
this.fileList(el.target);
el.target.value = ''
},
fileList(fileList) {
let files = fileList.files;
for (let i = 0; i < files.length; i++) {
//判断是否为文件夹
if (files[i].type != '') {
this.fileAdd(files[i]);
} else {
//文件夹处理
this.folders(fileList.items[i]);
}
}
},
// 文件夹处理
folders(files) {
let _this = this;
//判断是否为原生file
if (files.kind) {
files = files.webkitGetAsEntry();
}
files.createReader().readEntries(function (file) {
for (let i = 0; i < file.length; i++) {
if (file[i].isFile) {
_this.foldersAdd(file[i]);
} else {
_this.folders(file[i]);
}
}
}); },
foldersAdd(entry) {
let _this = this;
entry.file(function (file) {
_this.fileAdd(file)
})
},
fileAdd(file) {
if (this.limit !== undefined) this.limit--;
if (this.limit !== undefined && this.limit < 0) return;
//总大小
this.size = this.size + file.size;
//判断是否为图片文件
if (file.type.indexOf('image') == -1) {
this.$dialog.toast({mes: '请选择图片文件'});
} else {
let reader = new FileReader();
let image = new Image();
let _this = this;
reader.readAsDataURL(file);
reader.onload = function () {
file.src = this.result;
image.onload = function(){
let width = image.width;
let height = image.height;
file.width = width;
file.height = height;
_this.imgList.push({
file
});
console.log( _this.imgList);
};
image.src= file.src;
}
}
},
// 删除图片
delImg(index) {
this.size = this.size - this.imgList[index].file.size;//总大小
this.imgList.splice(index, 1);
if (this.limit !== undefined) this.limit = 6-this.imgList.length;
}
},
mounted:function(){
}
});
</script>
</html>
vue 拍照上传图片 demo的更多相关文章
- Android调用系统相册和拍照的Demo
最近我在群里看到有好几个人在交流说现在网上的一些Android调用系统相册和拍照的demo都有bug,有问题,没有一个完整的.确实是,我记得一个月前,我一同学也遇到了这样的问题,在低版本的系统中没问题 ...
- WebRTC系列(1)-手把手教你实现一个浏览器拍照室Demo
1.WebRTC开发背景 由于业务需求,需要在项目中实现实时音视频通话功能,之前基于浏览器开发的Web项目要进行音视频通话,需要安装flash插件才能实现或者使用C/S客户端进行通信.随着互联网技术的 ...
- 利用html5调用本地摄像头拍照上传图片[转]
利用html5调用本地摄像头拍照上传图片 html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...
- Vue异步组件Demo
Vue异步组件Demo 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义.Vue.js 只在组件需要 ...
- Vue实现上传图片功能
前言: 用vue实现上传图片功能,效果图如下: 先说文件上传控件样式美化怎么做,我有两种方法. 1.先上代码 html部分: <div class="pics-wrapper" ...
- 一个基于vue的仪表盘demo
最近写了一个基于vue的仪表盘,其中 主要是和 transform 相关的 css 用的比较多.给大家分享一下,喜欢的话点个赞呗?嘿嘿 截图如下: 实际效果查看地址:https://jhcan333. ...
- 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架（asp.net core 2.X+Vue）模板项目学习之路（一） C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布，并能正常访问
中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...
- swift3.0 从相册选取或者拍照上传图片至阿里云OSS
导入相应的库 import Photos import AliyunOSSiOS 选取照片需要继承 UIImagePickerControllerDelegate,UINavigationContro ...
- 基于VUE选择上传图片并在页面显示（图片可删除）
demo例子: 依赖文件 : http://files.cnblogs.com/files/zhengweijie/jquery.form.rar HTML文本内容: <template> ...
随机推荐
- ELK架构设计
1.架构一 2.架构二 3.架构三 4.架构四 示例1: 示例二: ELKB简述 E:Elasticsearch 是一个基于Lucene的分布式搜索和分析引擎,具有高可伸缩.高可靠和易管理等特点.支持 ...
- Python学习笔记：Flask-Migrate基于model做upgrade的基本原理
1)flask-migrate的官网:https://flask-migrate.readthedocs.io/en/latest/ 2)获取帮助,在pycharm的控制台中输入 flask d ...
- float 浮点数与零值0比较大小 ZZ
float x: 千万不要写x==0; 写出float x 与“零值”比较的if语句——一道面试题分析 写出float x 与“零值”比较的if语句 请写出 float x 与“零值”比较的 if ...
- C++异常处理解析: 异常的引发(throw), 捕获(try catch)、异常安全
前言: C++的异常处理机制是用于将运行时错误检测和错误处理功能分离的一 种机制(符合高内聚低耦合的软件工程设计要求), 这里主要总结一下C++异常处理的基础知识, 包括基本的如何引发异常(使用th ...
- Java编译过程（传送门）
我不是要做一门编程语言,了解这个对我现在的工作也没什么帮助,纯粹好奇而已. 传送门
- iOS实现图片裁剪功能，基于TKImageView完善与讲解
1.功能需求:需要实现图片区域裁剪功能. 2.效果图: 3.实现原理:本来想自己实现的,刚好看到一个比较好的库:TKImageView,下载好研究了下,发现基本都能满足我的需求,而且封装的也比 ...
- C#版Websocket实例
C#版Websocket实例 Demo地址:www.awbeci.xyz websocket有java.nodejs.python,Php等等版本,我使用的是C#版本,服务器端是Fleck,git ...
- 对 IIC 总线的理解、调用函数以及常见面试问题
一.IIC 总线概述: IIC 即Inter-Integrated Circuit(集成电路总线) I2C总线是PHLIPS公司推出的一种串行总线, I2C总线只有两根双向信号线.一根是数据线SDA, ...
- 解决ubuntu下IntelliJ IDEA无法锁定到启动器的问题
参考:https://www.zhihu.com/question/31626161 在目录~/.local/share/applications 中找到以前的IDEA的.desktop文件,删掉即可
- 【神经网络】Dependency Parsing的两种解决方案
一.Transition-based的依存解析方法 解析过程:首先设计一系列action, 其就是有方向带类型的边,接着从左向右依次解析句子中的每一个词,解析词的同时通过选择某一个action开始增量 ...