MeetMateApp/pages/my/managePhoto.vue

<template>
	<view class="page">
		<view class="list_info">

			<view class="item_tag">
				<view class="tag" v-for="(item,index) in list">
					<image class="logo" :src="item" mode="aspectFill"></image>
					<image class="close" src="../../static/me/close2.png" mode="widthFix" @click="delImg(item)" />
				</view>
				<view class="tagAdd" @click="upload">
					<image class="add" src="../../static/me/icon_add.png" mode="widthFix" />
				</view>
			</view>
			<view class="tips">*最多上传{{maxImageCount}}张图片</view>

			<view class="blankHeight"></view>
		</view>

		<view class="btn_submit" @click="submitData">提交</view>


		<!-- 提示框 -->
		<DialogBox ref="DialogBox"></DialogBox>
	</view>
</template>

<script>
import { isArray } from '../../uni_modules/cl-uni/utils';
	export default {
		components: {},
		data() {
			return {
				title: '',
				sel: 1,
				list_tag: [
					'xx', 'ff', 'vv'
				],
				list: [],
				maxImageCount:5
			}
		},
		onLoad() {
			this.loadData();
		},
		onShow() {},
		methods: {
			onBack() {},
			chkSel() {
				if (this.sel == 1) {
					this.sel = 0;
				} else {
					this.sel = 1;
				}
			},
			loadData() {
				console.log({
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey
				});
				uni.request({
					url: this.$apiHost + '/Member/getphoto',
					data: {
						uuid: getApp().globalData.uuid
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log("----:", res.data);
						if (res.data.list != null) {
							let list2 = [];
							for (var i = 0; i < res.data.list.length; i++) {
								list2.push(res.data.list[i].image);
							}
							this.list = list2;
						}
					},
					complete: (com) => {
						// uni.hideLoading();
					},
					fail: (e) => {
						console.log("----e:", e);
					}
				});
			},
			submitData() {
				let str = "";
				if (this.list.length > 5) {
					uni.showToast({
						title: "最多上传5张图片",
						icon: 'none'
					});
					return;
				}
				if (this.list != null) {
					for (var i = 0; i < this.list.length; i++) {
						str += this.list[i] + "|";
					}
				}
				uni.request({
					url: this.$apiHost + '/Member/uploadPhoto',
					data: {
						uuid: getApp().globalData.uuid,
						imgs: str,
					},
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						console.log("----", res.data);
						uni.showToast({
							title: res.data.str,
							icon: 'none'
						});
						if (res.data.success == "yes") {
							setTimeout(()=>{
								uni.navigateBack(1)
							},1500)
						}
					}
				});

			},
			delImg(img) {
				if (this.list != null) {
					let list2 = [];
					for (var i = 0; i < this.list.length; i++) {
						if (img != this.list[i]) {
							list2.push(this.list[i]);
						}
					}
					this.list = list2;
				}
			},
			upload() {
				console.log("----upload");
				var that = this;
				if (this.list.length >= this.maxImageCount) {
					uni.showToast({
						title: "最多上传5张图片",
						icon: 'none'
					});
					return;
				}
				let count = this.maxImageCount - this.list.length
				uni.chooseImage({
					count,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册、相机选择
					extension: ['.png', '.jpeg', '.jpg'],
					success: function(res) {
						console.log('res:', res)
						uni.showLoading({})
						if (res.tempFilePaths.length > 0) {
							for (var i = 0; i < res.tempFilePaths.length; i++) {
								const tempFilePaths = res.tempFilePaths[i];
								console.log('tempFilePaths:', tempFilePaths);
								// 图片上传
								const uploadTask = uni.uploadFile({
									url: that.$apiHost + '/Xweb/upload_img?skey=' + that.skey,
									filePath: tempFilePaths,
									name: 'file',
									success: function(uploadFileRes) {
										let resdata = JSON.parse(uploadFileRes.data)
										if (resdata.success == 'yes') {
											that.list.push(resdata.url);
										}
									},
									fail: function(uploadFileFail) {
										console.log('Error:', uploadFileFail.data);
									},
									complete: () => {
										console.log('Complete:');
										if (i >= res.tempFilePaths.length - 1) {
											uni.hideLoading()
										}
									}
								});
							}
							setTimeout(function() {
								uni.hideLoading()
							}, 20000);
						}
					},
					error: function(e) {
						console.log(e);
					}
				});


			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'managePhoto.scss';
</style>