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'
	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) => {
						console.log(JSON.stringify(res.tempFilePaths));
						// _this.imgs.push((res.tempFilePaths)[0])
						// console.log(_this.imgs)
						const file = res.tempFilePaths[0];
						
						// 文件上传
						uni.uploadFile({
							url:getApp().globalData.baseurl+ '/file/open/', //自己的后端接口（默认发送post请求）
							filePath:file,
							name:"file",  //这里应为自己后端文件形参的名字
							data:{
		//                     
							},
							header:{
								'Content-type' : 'multipart/form-data'
							},
							success(res) {
								res = res.data
								console.log(JSON.parse(res).success)
								if(JSON.parse(res).success){
									_this.imgs.push(JSON.parse(res).data)
									_this.sendData()
								}
							}
						})
						
						// uni.showLoading({
						// 	title: '上传中',
						// 	mask: true
						// });
						
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							console.log(i,'41')
							//解决跨越问题，让通过微信上传的图片你能够展示在浏览器前端
							// uni.getImageInfo({
							// 	src: res.tempFilePaths[0],
							// 	success: (path) => {
							// 		pathToBase64(path.path).then(base64 => {
							// 				console.log("base64="+base64); // 这就是转为base64格式的图片
							// 				_this.imgs=base64
							// 			})
							// 			.catch(error => {
							// 				console.error(error)
							// 			})
							// 	}
							// })
							// const result = uni.uploadFile({
							// 	filePath: res.tempFilePaths[i],
							// 	cloudPath: _this.$api.getFileName(res.tempFilePaths[i]),
							// 	onUploadProgress: function(progressEvent) {
							// 		console.log(progressEvent,'0p1')
							// 		var percentCompleted = Math.round((progressEvent.loaded *
							// 			100) / progressEvent.total);
							// 	}
							// }).then(uRes => {
							// 	console.log(uRes, res.tempFiles[i],'0p')
							// 	uRes.url = uRes.fileID;
							// 	uRes.type = res.tempFiles[i].type || '';
							// 	uRes.size = res.tempFiles[i].size;
								
							// 	_this.imgs.push(uRes);
							// 	_this.sendData()
							// }).catch(err => {
							// 	console.log('use-upload', err);
							// });
						}

						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>