一款好用的小程序图片上传（预览删除）插件

本是古典何须时尚 2021-09-30 03:58 507阅读 0赞

## ##

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70][] ###

![20190724151740550.png][]

## ##

### 组件源码 ###

### image-upload.vue ###

<template>
    	<view class="imageUploadContainer">
    		<view class="imageUploadList">
    			<view class="imageItem" :class="index % 4 == 0 ? 'imageItem-row-first' : ''" :key="index" v-for="(path, index) in value">
    				<view @click="previewImage(index)" @touchstart="start" @touchmove.stop="move" @touchend="stop">
    					<image mode="aspectFill" :src="path" :class="{ dragging: isDragging(index) }" draggable="true"></image>
    				</view>
    				<view v-if="isShowDel" class="imageDel" @click.stop="deleteImage(index)">×</view>
    				<view class="firstImageLabel" v-if="isFirstLabel && index == 0 && dragIndex === null">{
       { firstImageLabel }}</view>
    			</view>
    			<view v-if="isShowAdd" class="imageUpload" @click="selectImage"></view>
    		</view>
    		<image mode="aspectFill" v-if="showMoveImage" class="moveImage" :style="{ left: posMoveImageLeft, top: posMoveImageTop }" :src="moveImagePath"></image>
    	</view>
    </template>
    
    <script>
    var _self;
    
    export default {
    	name: 'robby-image-upload',
    	props: ['value', 'enableDel', 'enableAdd', 'enableDrag', 'serverUrl', 'formData', 'limit', 'fileKeyName', 'showUploadProgress', 'firstImageLabel'],
    	data() {
    		return {
    			imageBasePos: {
    				x0: -1,
    				y0: -1,
    				w: -1,
    				h: -1
    			},
    			showMoveImage: false,
    			moveImagePath: '',
    			moveLeft: 0,
    			moveTop: 0,
    			deltaLeft: 0,
    			deltaTop: 0,
    			dragIndex: null,
    			targetImageIndex: null,
    			//上传的状态
    			states: []
    		};
    	},
    	computed: {
    		posMoveImageLeft: function() {
    			return this.moveLeft + 'px';
    		},
    		posMoveImageTop: function() {
    			return this.moveTop + 'px';
    		},
    		isShowDel: function() {
    			if (this.enableDel === false) {
    				return false;
    			} else {
    				return true;
    			}
    		},
    		isShowAdd: function() {
    			if (this.enableAdd === false) {
    				return false;
    			}
    			//  因为组件里value没有数据的时候，为空，没有length值，设置为空数组
    			if (!this.value) {
    				this.value = [];
    			}
    
    			if (this.limit && this.value.length >= this.limit) {
    				return false;
    			}
    
    			return true;
    		},
    		isDragable: function() {
    			if (this.enableDrag === false) {
    				return false;
    			} else {
    				return true;
    			}
    		},
    		isFirstLabel: function() {
    			if (this.firstImageLabel) {
    				return true;
    			} else {
    				return false;
    			}
    		}
    	},
    	methods: {
    		selectImage: function() {
    			_self = this;
    			console.log(_self.limit);
    			if (!_self.value) {
    				_self.value = [];
    			}
    
    			uni.chooseImage({
    				count: _self.limit ? _self.limit - _self.value.length : 20, //默认最大图片上传数量
    				success: function(e) {
    					var imagePathArr = e.tempFilePaths;
    
    					//如果设置了limit限制，在web上count参数无效，这里做判断控制选择的数量是否合要求
    					//在非微信小程序里，虽然可以选多张，但选择的结果会被截掉
    					//在app里，会自动做选择数量的限制
    					if (_self.limit) {
    						var availableImageNumber = _self.limit - _self.value.length;
    						if (availableImageNumber < imagePathArr.length) {
    							uni.showToast({
    								title: '图片总数限制为' + _self.limit + '张，当前还可以选' + availableImageNumber + '张',
    								icon: 'none',
    								mask: false,
    								duration: 2000
    							});
    							return;
    						}
    					}
    
    					for (let i = 0; i < imagePathArr.length; i++) {
    						_self.value.push(imagePathArr[i]);
    					}
    
    					//检查服务器地址是否设置，设置即表示图片要上传到服务器
    					if (_self.serverUrl) {
    						var remoteIndexStart = _self.value.length - imagePathArr.length;
    						var promiseWorkList = [];
    						var keyname = _self.fileKeyName ? _self.fileKeyName : 'file';
    						var completeImages = 0;
    
    						for (let i = 0; i < imagePathArr.length; i++) {
    							promiseWorkList.push(
    								new Promise((resolve, reject) => {
    									let remoteUrlIndex = remoteIndexStart + i;
    									uni.uploadFile({
    										url: _self.serverUrl, //上床的服务器文件路径
    										fileType: 'image',
    										formData: _self.formData,
    										filePath: imagePathArr[i],
    										name: keyname,
    										success: function(res) {
    											if (res.statusCode === 200) {
    												const data = JSON.parse(res.data);
    												_self.value[remoteUrlIndex] = data.accessUrl;
    
    												completeImages++;
    
    												if (_self.showUploadProgress) {
    													uni.showToast({
    														title: '上传进度：' + completeImages + '/' + imagePathArr.length,
    														icon: 'none',
    														mask: false,
    														duration: 1000
    													});
    												}
    												console.log('success to upload image: ' + res.data);
    												resolve('success to upload image:' + remoteUrlIndex);
    											} else {
    												console.log('fail to upload image:' + res.data);
    												reject('failt to upload image:' + remoteUrlIndex);
    											}
    										},
    										fail: function(res) {
    											console.log('fail to upload image:' + res);
    											reject('failt to upload image:' + remoteUrlIndex);
    										}
    									});
    								})
    							);
    						}
    						Promise.all(promiseWorkList).then(result => {
    							_self.$emit('add', {
    								currentImages: imagePathArr,
    								allImages: _self.value
    							});
    							_self.$emit('input', _self.value);
    						});
    					} else {
    						_self.$emit('add', {
    							currentImages: imagePathArr,
    							allImages: _self.value
    						});
    						_self.$emit('input', _self.value);
    					}
    				}
    			});
    		},
    		deleteImage: function(e) {
    			var imageIndex = e;
    			var deletedImagePath = this.value[imageIndex];
    			this.value.splice(imageIndex, 1);
    
    			this.$emit('delete', {
    				currentImage: deletedImagePath,
    				allImages: this.value
    			});
    			this.$emit('input', this.value);
    		},
    		previewImage: function(e) {
    			var imageIndex = e;
    			console.log(e);
    			uni.previewImage({
    				current: this.value[imageIndex],
    				//#ifndef MP-ALIPAY
    				indicator: 'number',
    				loop: 'true',
    				//#endif
    				urls: this.value
    			});
    		},
    		initImageBasePos: function() {
    			let paddingRate = 0.024;
    			_self = this;
    			//计算图片基准位置
    			uni.getSystemInfo({
    				success: function(obj) {
    					let screenWidth = obj.screenWidth;
    					let leftPadding = Math.ceil(paddingRate * screenWidth);
    					let imageWidth = Math.ceil((screenWidth - 2 * leftPadding) / 4);
    
    					_self.imageBasePos.x0 = leftPadding;
    					_self.imageBasePos.w = imageWidth;
    					_self.imageBasePos.h = imageWidth;
    				}
    			});
    		},
    		findOverlapImage: function(posX, posY) {
    			let rows = Math.floor((posX - this.imageBasePos.x0) / this.imageBasePos.w);
    			let cols = Math.floor((posY - this.imageBasePos.y0) / this.imageBasePos.h);
    			let indx = cols * 4 + rows;
    			return indx;
    		},
    		isDragging: function(indx) {
    			return this.dragIndex === indx;
    		},
    		start: function(e) {
    			if (!this.isDragable) {
    				return;
    			}
    			this.dragIndex = e.currentTarget.dataset.index;
    			this.moveImagePath = this.value[this.dragIndex];
    			this.showMoveImage = true;
    
    			//计算纵向图片基准位置
    			if (this.imageBasePos.y0 === -1) {
    				this.initImageBasePos();
    
    				let basePosY = Math.floor(this.dragIndex / 4) * this.imageBasePos.h;
    				let currentImageOffsetTop = e.currentTarget.offsetTop;
    				this.imageBasePos.y0 = currentImageOffsetTop - basePosY;
    			}
    
    			//设置选中图片当前左上角的坐标
    			this.moveLeft = e.target.offsetLeft;
    			this.moveTop = e.target.offsetTop;
    		},
    		move: function(e) {
    			if (!this.isDragable) {
    				return;
    			}
    			const touch = e.touches[0];
    			this.targetImageIndex = this.findOverlapImage(touch.clientX, touch.clientY);
    
    			//初始化deltaLeft/deltaTop
    			if (this.deltaLeft === 0) {
    				this.deltaLeft = touch.clientX - this.moveLeft;
    				this.deltaTop = touch.clientY - this.moveTop;
    			}
    
    			//设置移动图片位置
    			this.moveLeft = touch.clientX - this.deltaLeft;
    			this.moveTop = touch.clientY - this.deltaTop;
    		},
    		stop: function(e) {
    			if (!this.isDragable) {
    				return;
    			}
    			if (this.dragIndex !== null && this.targetImageIndex !== null) {
    				if (this.targetImageIndex < 0) {
    					this.targetImageIndex = 0;
    				}
    
    				if (this.targetImageIndex >= this.value.length) {
    					this.targetImageIndex = this.value.length - 1;
    				}
    				//交换图片
    				if (this.dragIndex !== this.targetImageIndex) {
    					this.value[this.dragIndex] = this.value[this.targetImageIndex];
    					this.value[this.targetImageIndex] = this.moveImagePath;
    				}
    			}
    
    			this.dragIndex = null;
    			this.targetImageIndex = null;
    			this.deltaLeft = 0;
    			this.deltaTop = 0;
    			this.showMoveImage = false;
    
    			this.$emit('input', this.value);
    		}
    	}
    };
    </script>
    
    <style>
    /* .imageUploadContainer {
    		padding: 10upx 5upx;
    		margin: 10upx 5upx;
    	} */
    
    .dragging {
    	opacity: 0.5;
    }
    
    .imageUploadList {
    	display: flex;
    	flex-wrap: wrap;
    }
    
    .imageItem,
    .imageUpload {
    	width: 160upx;
    	height: 160upx;
    	margin: 10upx 0;
    	margin-left: 16upx;
    }
    
    .imageItem-row-first {
    	margin-left: 0;
    }
    
    .imageDel {
    	position: relative;
    	left: 120upx;
    	bottom: 160upx;
    	background-color: rgba(0, 0, 0, 0.5);
    	color: #ffffff;
    	width: 36upx;
    	text-align: center;
    	line-height: 36upx;
    	border-radius: 60upx;
    	font-size: 40upx;
    }
    
    .imageItem image,
    .moveImage,
    .imageCover {
    	width: 160upx;
    	height: 160upx;
    	border-radius: 8upx;
    }
    
    /* 注释掉的后面可以改回来 */
    .imageUpload {
    	position: relative;
    	box-sizing: border-box;
    	/* border: 1px solid #D9D9D9; */
    	/* border-radius: 8upx; */
    
    	background: url(../../static/index/imgUpload.png) no-repeat; /* 修改了下背景图 */
    	background-size: 100%;
    	left: 30upx;
    }
    
    /* 	.imageUpload:before,
    	.imageUpload:after {
    		content: " ";
    		position: absolute;
    		top: 50%;
    		left: 50%;
    		-webkit-transform: translate(-50%, -50%);
    		transform: translate(-50%, -50%);
    		background-color: #D9D9D9;
    	}
     */
    .imageUpload:before {
    	width: 4upx;
    	height: 79upx;
    }
    
    .imageUpload:after {
    	width: 79upx;
    	height: 4upx;
    }
    
    .moveImage {
    	position: absolute;
    	transform: scale(1.2);
    }
    
    .imageCover {
    	position: relative;
    	left: 0;
    	bottom: 178upx;
    	width: 100%;
    	text-align: center;
    	line-height: 160upx;
    	background-color: rgba(0, 0, 0, 0.5);
    	font-size: 24upx;
    	color: white;
    }
    
    .firstImageLabel {
    	position: relative;
    	left: 0;
    	bottom: 98upx;
    	width: 100%;
    	text-align: center;
    	line-height: 40upx;
    	background-color: #0081ff;
    	font-size: 24upx;
    	color: white;
    	opacity: 0.8;
    }
    </style>

### 在父组件中引用 ###

<template>
    	<view>
    		<image-upload></image-upload>
    		
    	</view>
    </template>
    <script>
    	import imageUpload from './image-upload.vue'
    
    	export default {
    		data() {
    			return {
    				photo: [],
    			}
    		},
    	}

后续会进行更新

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTM5MjUx_size_16_color_FFFFFF_t_70]: /images/20210923/2675a3317ef94f55b4a20beba9449354.png
[20190724151740550.png]: /images/20210923/c4772b0f3f664e9e8e49c43317b49c02.png