uniapp 上传图片文件组件

<template>
	<view>

		<view @click="uploadClick" class="picBox">
			<view class="iconfont icon-tianjiatupian size"></view>
		</view>

		<view class="previewBox">
			<view class="previewBoxItem" v-for="(item,index) in previewUrl" :key="index">
				<image class="imgBox" :src="item" @click="previewClick"></image>
				<view @click="deleteClick" :data-index="index" class="deleteBox iconfont icon-shanchu"></view>
			</view>
		</view>

	</view>
</template>

<script>
	import CommFunction from '../../components/common/common.vue'
	import Config from '../../components/config/config.vue'
	export default {
		data() {
			return {
				previewUrl: [],
				picNums: 0
			}
		},
		onLoad() {

		},
		methods: {
			// 调用系统相机
			systemCameraClick: function() {
				let that = this;

				if (that.previewUrl.length < 6) {
					console.log('sss')
					uni.chooseImage({
						count: 3,
						sizeType: ['original', 'compressed'],
						success: function(res) {
							for (var i = 0; i < res.tempFilePaths.length; i++) {
								uni.getImageInfo({
									src: res.tempFilePaths[i],
									success: function(image) {
										that.previewUrl.push(image.path);
									}
								});
							}
						}
					});
				}
			},
			previewClick: function() {
				let that = this;
				uni.previewImage({
					urls: that.previewUrl
				});
			},
			deleteClick: function(e) {
				let index = e.mp.currentTarget.dataset.index;

				this.previewUrl.splice(index, 1);
			},
			uploadClick: function() {
				
				let that = this;
				
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						
						for (var i = 0; i < tempFilePaths.length; i++) {
							uni.getImageInfo({
								src: tempFilePaths[i],
								success: function(image) {
									that.previewUrl.push(image.path);
								}
							});
						}
						
						uni.uploadFile({
							url: Config.uploadImg, 
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'type': 'a1',
								'path':'https:llldlsal;ds',
								'user_id':'dmskaldals'
							},
							success: (uploadFileRes) => {
								let json = eval('(' + uploadFileRes.data + ')');
								
								uni.getStorage({
									key:'upPicUrl',
									success:function(rey){
										console.log(rey.data)
										uni.setStorage({
											key:'upPicUrl',
											data:rey.data += (","+json.data)
										})
									},
									fail:function () {
										uni.setStorage({
											key:'upPicUrl',
											data:json.data
										})
									}
								})
								
								
								
							} 
						});
					}
				});
			}
		}
	}
</script>

<style>
	/* 上传图片 */
	.size {
		font-size: 100rpx;
	}

	.previewBox {
		display: flex;
		flex-wrap: wrap;
		margin: .3rem;
		align-items: center;
	}

	.imgBox {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.previewBoxItem {
		width: 32%;
		height: 200rpx;
		background: #007AFF;
		margin: 0.6%;
		border-radius: 10rpx;
		position: relative;
		border-radius: 10rpx;
		overflow: hidden;
	}

	uni-image {
		width: auto !important;
		height: auto !important;
	}

	.picBox {
		padding: 0 .6rem;
	}

	/* 删除 */
	.deleteBox {
		padding-left: 78%;
		margin-top: -10px;
		font-size: 20px;
		position: absolute;
		top: 4px;
		right: 2px;
	}
</style>