car-repair-mini-app/components/image-upload/image-upload.vue

<template>
	<view>
		<view class="upload-box">
			<view class="upload-box-items" :style="[defaultStyle]" v-for="(item,index) in PhotoSharinglist" :key="index">
				<image :src="item" mode="aspectFill" @click="previewImage(index)" />
				<image v-if="clearIcon" :src="clearIcon" mode="" @click="del(index)" />
				<image v-else class="clear" src="@/static/images/components/upload/clear.png" mode="widthFix" @click="del(index)" />
			</view>
			<view class="upload-box-items" :style="[defaultStyle]" v-if="PhotoSharinglist.length!=limit" @click="chooseImage">
					<image v-if="uploadIcon" :src="uploadIcon" mode="" />
					<image v-else src="@/static/images/components/upload/plus_upLoad_icon.png" mode="" />
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * image-upload 图片上传组件
	 * @description 该组件为图片上传组件
	 * @tutorial 
	 * @property {String}			value 		v-model				图片结果
	 * @property {String | Number}	imageWidth				上传图片宽度（默认198rpx）
	 * @property {String | Number}	imageHeight				上传图片宽度（默认等于宽度）
	 * @property {String}				uploadIcon						上传图片图标
	 * @property {String}				clearIcon							删除图片
	 * @property {String | Number}			limit					最大上传数量	 
	 * @property {Boolean}			isPreviewImage		上传图片是否可预览 （默认 true ）
	 * @property {Boolean}			loop		上传图片是否可预览 （默认 false ）
	 * @example <image-upload v-model="value" />
	 */ 
	import config from '@/config';
	import { getToken } from '@/utils/auth';
	export default {
		name:"image-upload",
		props: {
			value: {
				type: String,
				default: ''
			},
			/** 图片宽度 */ 
			imageWidth: {
				type: [Number, String],
				default: 198
			},
			/** 图片高度 */
			imageHeight: {
				type: [Number, String],
				default: 0
			},
			/** 上传图片背景 */
			uploadIcon: {
				type: String,
				default: ''
			},
			/** 清除按钮图片 */
			clearIcon: {
				type: String,
				default: ''
			},
			/** 最大上传图片数量 */
			limit: {
				type: [Number, String],
				default: 9
			},
			/** 是否可预览 */
			isPreviewImage: {
				type: Boolean,
				default: true
			},
			/** 是否可循环预览 */
			loop: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			defaultStyle(){
				let style = {}
				style.width = this.imageWidth + 'rpx'
				if(this.imageHeight) {
					style.height = this.imageHeight + 'rpx'
				} else style.height = this.imageWidth + 'rpx'
				return style
			}
		},
		watch: {
			value: {
				handler(nV, oV) {
					console.log(this.value)
					if(nV){
						this.PhotoSharinglist = this.value.split(',')
					}
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				PhotoSharinglist: [],
				compress: []
			};
		},
		methods: {
			previewImage(index){
				if(this.isPreviewImage)
				uni.previewImage({
					current: index,
					urls: this.PhotoSharinglist,
					loop: this.loop
				})
			},
			// 移除图片
			del(index) {
				this.PhotoSharinglist.splice(index, 1)
				let images = this.PhotoSharinglist.join()
				this.$emit('input', images)
			},
			// 选择图片
			chooseImage(){
				uni.chooseImage({
					count: this.limit - this.PhotoSharinglist.length,
					success: res => {
						let list = res.tempFilePaths;
						for (let i = 0; i < list.length; i++) {
							uni.showLoading({
								title: '文件上传中',
								mask: true
							});
							this.updata(list[i], list.length, i)
						}
					}
				})
			},
			// 上传
			updata(url, len, i) {
				// 默认请求地址
				let baseURL = config.fileUploadUrl;
				let token = getToken();
				uni.uploadFile({
					url: baseURL, // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					header: {
						'Authorization': token ? 'Bearer' + ' ' + token : ''
					},
					success: (res) => {
						uni.hideLoading();
						let url = JSON.parse(res.data).data.url;
						let compressUrl=JSON.parse(res.data).data.urlSmall;
						this.PhotoSharinglist.push(url);
						this.compress.push(compressUrl);
						if(i==(len-1)) {
							let images = this.PhotoSharinglist.join()
							this.$emit('input', images)
						}
					},
					fail: (error) => {
						uni.hideLoading();
						uni.showToast({
							title: error.msg,
							icon: 'none'
						})
						this.$emit('fail', error.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.upload-box {
		display: flex;
		flex-flow: wrap;
	}
	.upload-box-items {
		position: relative;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 24rpx;
		color: #979797;
		background: #FEFEFE;
		border-radius: 20rpx;
		image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
		.clear {
			position: absolute;
			top: 0;
			right: 0;
			transform: translate(40%, -40%);
			width: 20%;
			border-radius: 50%;
			background-color: white;
		}
	}
</style>