uniapp 上传图片文件组件

迈不过友情╰ 2021-09-19 04:08 694阅读 0赞

<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>