mpvue 图片上传预览组件封装
<template>
<div class="j-pic-upload">
<div class="j-upload-btn" @click="uploadImg()" :style="{'width':width || '120rpx','height':height || '120rpx'}">
<span class="j-upload-add">+</span>
</div>
<img @click="previewImg(index)" v-for="(src,index) in urls" :key="src" :src="src" :style="{'width':width || '120rpx','height':height || '120rpx'}" class="img" >
</div>
</template> <script>
export default {
props:["width","height","max","srcs"],
data(){
return {
urls:[]
}
},
mounted(){
this.urls = this.srcs || [];
},
methods:{
uploadImg(){
let that = this;
wx.chooseImage({
count: that.max || 3,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
res.tempFilePaths.forEach(v=>{
that.urls.push(v);
});
that.$emit("choosed",{all:that.urls,currentUpload:res.tempFilePaths});
}
})
},
previewImg(index){
let that = this;
wx.showActionSheet({
itemList:["预览","删除"],
success: function(res) {
if(res.tapIndex === 0){
wx.previewImage({
current:that.urls[index],
urls:that.urls
});
} else {
that.urls.splice(index,1);
that.$emit("delete",that.urls);
}
},
});
},
}
}
</script> <style scoped>
.j-pic-upload{
padding: 10rpx;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
.j-upload-btn{
border: 1px dashed #ddd;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-right: 20rpx;
}
.j-upload-add{
font-size: 80rpx;
font-weight: 500;
color:#C9C9C9;
}
.img{
margin:10rpx 20rpx 10rpx 0;
}
</style> <!-- 使用
import Upload from "@/components/upload"
<upload width="120rpx" height="120rpx" max="6" @choosed="choosed" @delete="" :srcs="['/static/img/no-man.png']"></upload> Read me
属性名 说明 举例 是否必传 默认 返回值说明
width 定义上传按钮和图片展示的宽度 120rpx 否 120rpx
height 定义上传按钮和图片展示的高度 120rpx 否 120rpx
max 每次最多上传几张图片 5 否 3
srcs 可以传入一个图片url的数组 :srcs="['/static/img/no-man.png']" 否 null
choosed 每次选完图片触发此事件 @choosed="choosed" 否 null 返回一个对象,all代表选取的所有图片,currentUpload代表目前选取的图片
delete 每次删除已选取的图片触发 @delete="deleteImg" 否 null 返回所有选取的图片 -->
预览图:
mpvue 图片上传预览组件封装的更多相关文章
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- Jquery图片上传预览效果
uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...
- [前端 4] 使用Js实现图片上传预览
导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...
- Javascript之图片上传预览
使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...
- HTML5 图片上传预览
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- ASP.NET工作笔记之一:图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- js实现图片上传预览及进度条
原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...
- html 图片上传预览
Html5 upload img 2012年12月27日 20:36 <!DOCTYPE HTML> <html> <head> <meta http-equ ...
随机推荐
- Could not delete D:/workspace/.metadata/.plugins/org.eclipse.wst.server.core/tmp1/wtpwebapps/platform/WEB-INF/lib
再把之前的maven工程删掉时,出现了如下错误: Could not delete D:/workspace/.metadata/.plugins/org.eclipse.wst.server.cor ...
- android Action中的data属性
(2) 根据Action和Data匹配 <activity android:name=".MyActivityTwo" android:label="@string ...
- Alodi:为了保密我开发了一个系统
每天都在愉快的造轮子,这次可以一键创建测试环境 咖啡君维护了几十个不同类型项目,其中有相当一部分项目是对保密性有很高要求的,也就是说下个版本要上线的内容是不能提前泄露的,就像苹果新产品的介绍网站决不允 ...
- Elasticsearch(7) --- 复合查询
Elasticsearch(7) ---复合查询 复合查询有:bool query(布尔查询).boosting query(提高查询).constant_score(固定分数查询).dis_max( ...
- Genymotion模拟器的安装及脚本制作
在上一篇博文中,讲到这一篇会介绍Genymotion的安装方式.大家都知道,Genymotion是一个模拟器,获取会质疑了,直接连接真机就好了,为何还要配置模拟器?我也是用真机实践后,才选择安装的模拟 ...
- 【PTA】浙江大学数据结构慕课 课后编程作业 03-树1 树的同构
题目内容 给定两棵树T1和T2.如果T1可以通过若干次左右孩子互换就变成T2,则我们称两棵树是"同构"的.例如图1给出的两棵树就是同构的,因为我们把其中一棵树的结点A.B.G的左右 ...
- Spring Boot (四): Druid 连接池密码加密与监控
在上一篇文章<Spring Boot (三): ORM 框架 JPA 与连接池 Hikari> 我们介绍了 JPA 与连接池 Hikari 的整合使用,在国内使用比较多的连接池还有一个是阿 ...
- Spring事务传播行为中可能的坑点
一.简介 Spring事务配置及相关说明详见:https://www.cnblogs.com/eric-fang/p/11052304.html.这里说明spring事务的几点注意: 1.默认只会检查 ...
- moment实现计算两个时间的差值
var m1 = moment('2018-08-14 11:00:00'), m2 = moment('2018-08-14 12:10:00'); console.log(m1)console.l ...
- Docker下实战zabbix三部曲之三:自定义监控项
通过上一章<Docker下实战zabbix三部曲之二:监控其他机器>的实战,我们了解了对机器的监控是通过在机器上安装zabbix agent来完成的,zabbix agent连接上zabb ...