uniapp点击图片可以多张预览

照片多张预览 全选 多选 删除 长按删除

<template><view><view class="module-images-box"><image @click="naviga" v-if="type == 1" class="images-upload-box"src="../../static/images/agrarian/upload_photograph.png" mode=""></image><view class="item-upload-box" v-for="(item,index) in imagesList" @tap="onSel(index, item)"><checkbox-group><image @tap.stop="doPreviewImage(item,index)" @longtap="delImg" class="images-upload" :src="item.url"mode=""></image><checkbox v-if="checkShow" :checked="item.checked" :class="{ checked: item.checked }"class="round orange checkItem " style="transform: scale(0.7);"></checkbox></checkbox-group></view></view><canvas id="canvas-clipper" canvas-id="canvas-clipper" type="2d":style="{width: canvasSiz.width+'px',height: canvasSiz.height+'px',position: 'absolute',left:'-500000px',top: '-500000px'}" /><view class="btm-btn" v-if="checkShow"><view class="btn-btn-left" @click="onAllSel">全选</view><view @click="show=true">删除</view></view><u-modal @confirm="confirmdelete" :show-cancel-button="true" title="提示" v-model="show" :content="content"></u-modal></view>
</template><script>var _this;export default {data() {return {imagesList: [{url: '../../static/images/product/1144.png'},{url: '../../static/images/carbaolog.png'},{url: '../../static/images/carbaolog.png'},{url: '../../static/images/missing-face.png'},{url: '../../static/images/XuePingXian.png'},],action: '',fileList: [],type: '',windowWidth: '',windowHeight: '',imagesrc: null,canvasSiz: {width: 188,height: 275},longitude: '',latitude: '',allSel: false,checkShow: false,show: false,content: '确定删除所选照片吗?'};},onLoad(option) {this.type = option.typeif (option.type == 1) {uni.setNavigationBarTitle({title: '验标照片'})} else {uni.setNavigationBarTitle({title: '农户清单照片'})}_this = this;this.init();let that = this;uni.getLocation({type: 'wgs84',success: function(res) {that.longitude = res.longitude;that.latitude = res.latitude;}});this.imagesList.map((item, index) => {item.checked = falsereturn item})console.log(this.imagesList)},methods: {// 图片预览doPreviewImage(previewImg,index) {console.log('index',previewImg, index)console.log('预览')let _this = this;let imgsArray = [];for (let i = 0; i < _this.imagesList.length; i++) {console.log(_this.imagesList[i].url)imgsArray.push(_this.imagesList[i].url)}uni.previewImage({current: index - 1,urls: imgsArray,indicator: 'number',loop: true});},// 长按删除delImg() {console.log('长按删除')this.checkShow = !this.checkShow;},// 单选onSel(index, item) {console.log('单选', item, index)item.checked = !item.checked;this.imagesList.every(good => {return good.checked})this.$forceUpdate()},// 全选onAllSel() {this.allSel = !this.allSelthis.imagesList.forEach(good => {good.checked = this.allSel})this.$forceUpdate()},// 确认删除confirmdelete() {let filterList = this.imagesList.filter((item) => {return item.checked == false;});this.imagesList = filterList;// console.log('filterList',filterList,this.imagesList)this.$forceUpdate()},//跳转拍照naviga() {uni.navigateTo({url: '/pages/agrarian/camer/camer'})},//设置图片setImage(e) {console.log('设置图片', e);//显示在页面// this.imagesrc = e.path;if (e.dotype == 'idphoto') {_this.zjzClipper(e.path);} else if (e.dotype == 'watermark') {_this.watermark(e.path);} else {_this.savePhoto(e.path);}},//添加照片水印watermark(path) {console.log('path', path)var longitude = this.longitude;var latitude = this.latitude;uni.getImageInfo({src: path,success: function(image) {console.log('131', path, image);_this.canvasSiz.width = image.width;_this.canvasSiz.height = image.height;console.log('135')//担心尺寸重置后还没生效，故做延迟setTimeout(() => {let ctx = uni.createCanvasContext('canvas-clipper', _this);console.log('139')ctx.drawImage(path,0,0,image.width,image.height);console.log('148', path)//具体位置如需和相机页面上一致还需另外做计算，此处仅做大致演示ctx.setFillStyle('white');ctx.setFontSize(40);ctx.fillText('燕赵财险', 20, 100);ctx.fillText('经度：' + longitude, 20, 180);ctx.fillText('纬度：' + latitude, 20, 220);//再来加个时间水印var now = new Date();var time = now.getFullYear() + '-' + now.getMonth() + '-' + now.getDate() +' ' + now.getHours() + ':' + now.getMinutes() + ':' + now.getMinutes();ctx.setFontSize(30);ctx.fillText(time, 20, 140);ctx.draw(false, () => {console.log('160')uni.canvasToTempFilePath({destWidth: image.width,destHeight: image.height,canvasId: 'canvas-clipper',fileType: 'jpg',success: function(res) {console.log('===>res', res)_this.savePhoto(res.tempFilePath);}},_this);});}, 500)}});},//保存图片到相册，方便核查savePhoto(path) {console.log('保存到相册', path)this.imagesrc = path;this.imagesList.push({url: path})console.log('照片数组', this.imagesList)//保存到相册uni.saveImageToPhotosAlbum({filePath: path,success: () => {uni.showToast({title: '已保存至相册',duration: 2000});}});},//初始化init() {let _this = this;uni.getSystemInfo({success: function(res) {_this.windowWidth = res.windowWidth;_this.windowHeight = res.windowHeight;}});}}}
</script><style lang="scss" scoped>.module-images-box {width: 100%;padding: 20upx;display: flex;// justify-content: space-between;align-items: center;flex-wrap: wrap;background: #fff;.images-upload-box {width: 160upx;height: 160upx;}.item-upload-box {display: inline-block;width: 160upx;height: 160upx;margin: 4px;position: relative;.checkItem {position: absolute;top: 2upx;right: 2upx;}.images-upload {width: 160upx;height: 160upx;}}}.imageBox {width: 160upx;height: 160upx;image {width: 160upx;height: 160upx;}}.btm-btn {width: 100%;height: 70upx;// background: rgba(0,0,0,0.2);position: fixed;bottom: 0;left: 0;display: flex;align-items: center;justify-content: space-around;box-shadow: 0 0 10px #cdcdcd;view {height: 70upx;width: 50%;line-height: 70upx;text-align: center;background: #F56C6C;color: #fff;}.btn-btn-left {background: #0A7CFF;border-right: 1px solid #cdcdcd;}}::v-deep .uni-label-pointer {cursor: pointer;margin-left: 8px !important;}::v-deep uni-switch.orange[checked] .wx-switch-input,::v-deep uni-checkbox.orange[checked] .wx-checkbox-input,::v-deep uni-radio.orange[checked] .wx-radio-input,::v-deep uni-checkbox.orange.checked .uni-checkbox-input {background-color: #0A7CFF !important;border-color: #0A7CFF !important;color: #ffffff !important;}::v-deep uni-radio .wx-radio-input,::v-deep uni-checkbox .wx-checkbox-input,::v-deep uni-radio .uni-radio-input,::v-deep uni-checkbox .uni-checkbox-input {margin-right: 3px !important;width: 18px !important;height: 18px !important;}
</style>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！