Homestay_manage_app/packageShang/components/use-upload/use-upload.vue

<template>
	<view class="use-upload dflex dflex-wrap-w">
		<view class="item pos-r" v-for="(item, index) in imgs" @click="preImage(item, imgs)" :key="index">
			<!-- <video v-if="item.type.indexOf('video/') !== -1" :src="item.url"></video> -->
			<image :src="item" mode="aspectFill"></image>
			<view class="del pos-a bg-main dflex-c border-radius-c iconfont iconlajitong-01 ft-dark" @tap.stop="delImage(index)"></view>
		</view>

		<view class="item dflex-c" v-if="imgs.length < limit" @tap="chooseImage">
			<view class="iconfont iconxiangji-01 fs-big ft-dark"></view>
		</view>
	</view>
</template>

<script>
	import common from '../../../static/comon.js'
	import { cos } from '@/util/cos.js'
	export default {
		props: {
			limit: {
				type: Number,
				default: 6
			}
		},
		data() {
			return {
				imgs: []
			};
		},
		methods: {
			chooseImage() {
				let _this = this;
	// 			uni.chooseImage({
	// 				count: _this.limit, //count: 6, //默认9
	// 				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	// 				sourceType: ['album'], //从相册选择
	// 				success: function(res) {
 
	// 					console.log(JSON.stringify(res.tempFilePaths));
	// 					this.imgs=JSON.stringify(res.tempFilePaths)
 
	// 				}
	// 			});

				uni.chooseImage({
					count: _this.limit,
					// 可以指定是原图|压缩图，默认二者都有
					sizeType: ['original', 'compressed'],
					success: (res) => {
						// _this.imgs.push((res.tempFilePaths)[0])
						// console.log(_this.imgs)
						const file = res.tempFilePaths[0];
						let Key = file.substr(file.lastIndexOf('/') + 1)
						cos.postObject(
							{
								Bucket: 'jinganminsu-1320402385',
								Region: 'ap-nanjing',
								Key: Key,
								FilePath: file,
								onProgress: (info) => {
									// console.log(info)
								}
							},
							(err, data) => {
								if (err) {
									console.log('上传失败', err)
								} else {
									console.log('上传成功', data)
						
									uni.hideLoading()
									let imgUrl = 'https://' + data.Location
									// this.form.img =imgUrl
									_this.imgs.push(imgUrl)
									_this.sendData()
									
								}
							}
						)
						
						for (var i = 0; i < res.tempFilePaths.length; i++) {
						}

						uni.hideLoading();
					}
				});
			},
			preImage(item, urls) {
				if (item.type.indexOf('video/') !== -1) {
					return;
				}
				
				let _urls = urls.filter(x => x.type.indexOf('image/') !== -1).map(ele => {
					return ele.url;
				});
				
				console.log(item, urls);
				uni.previewImage({
					current: item.url,
					urls: _urls,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},

			delImage(idx) {
				this.imgs.splice(idx, 1);
				this.sendData();
			},

			sendData() {
				this.$emit('upload', this.imgs);
			}
		}
	};
</script>

<style lang="scss">
	.use-upload {
		.item {
			width: 23%;
			margin-right: 2%;
			height: 150rpx;
			border: 1px solid #f0f0f0;

			image, video {
				width: 100%;
				height: 100%;
			}
		}

		.del {
			top: -30rpx;
			right: -10rpx;
			width: 50rpx;
			height: 50rpx;
			z-index: 99;
			box-shadow: 0px 3px 5px #f0f0f0;
		}
	}
</style>