uni-app二次封装uview-ui上传组件

封装upload组件是为了多页面复用同个封装后的组件，在调用组件时只需传所需的参数即可，避免多个页面重复写多个upload标签，从而减少页面代码的冗杂度，提升代码质量。

<template>
	<!-- 
	1、afterRead 读取后的处理函数
	2、deletePic 预览图片删除
	3、maxCount 运行选择图片数量
	4、name 标识符 可以在回调函数的第二项参数中获取
	5、multiple 是否开启图片多选
	 -->
	<view class="upload_img">
		<u-upload :fileList="fileList" @oversize="oversize" @afterRead="afterRead" @delete="deletePic" name="1" multiple
			:maxCount="maxCount" :width="width" :height="height">
			<u-image :showLoading="true" :src="newurl" mode="aspectFill" :width="imageWidth" :height="imageHeight">
			</u-image>
		</u-upload>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 默认允许上传一张图片
				maxCount: '1',
				newurl: ''
			};
		},
		props: {
			// 存储本地图片数据
			fileList: {
				type: Array,
				default: []
			},
			// 是否开启多选图片
			multiple: {
				type: Boolean,
				default: false
			},
			imgurl: {
				type: String,
				default: ''
			},
			src: {
				type: String,
				default: ''
			},
			width: {
				type: String,
				default: '80' || ''
			},
			height: {
				type: String,
				default: '80' || ''
			},
			imageWidth: {
				type: String,
				default: '80' || ''
			},
			imageHeight: {
				type: String,
				default: '80' || ''
			},
		},
		watch: {
			imgurl(newval, oldval) {
				this.newurl = newval;
			}
		},
		methods: {
			// 限制上传图片上传大小方法
			oversize(e) {
				this.$emit(e, 'over-size');
			},
			// 执行读取图片后的处理函数方法
			afterRead(e) {
				let data = e;
				this.newurl = e.file[0].url;
				this.$emit('after-Read', data);
			},
			// 删除选择预览上传图片方法
			deletePic(e) {
				this.$emit(e, 'del-Pic');
			}
		}
	};
</script>