MeetMateApp/pages/article/addArticle.vue

<template>
	<view class="page">
		<view class="header">
			<view class="left" @click="onBack()">
				<image class="icon" src="../../static/me/arrow_right.png" mode="widthFix" />
			</view>
			<view class="title">
				发布动态
			</view>
			<view class="right">
				<view class="btn" @click="submitData">发布</view>
			</view>
		</view>
		<view class="list_info">
			<view class="area">
				<textarea class="content" v-model="content" placeholder="请输入内容..."></textarea>
			</view>
			<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>

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

<script>
	export default {
		components: {},
		data() {
			return {
				title: '',
				sel: 1,
				list_tag: [
					'xx', 'ff', 'vv'
				],
				content: '',
				list: [],
				maxImageCount: 6
			}
		},
		onLoad() {},
		onShow() {
			// this.loadData();
		},
		methods: {
			onBack() {
				uni.navigateBack()
			},
			chkSel() {
				if (this.sel == 1) {
					this.sel = 0;
				} else {
					this.sel = 1;
				}
			},
			loadData() {

			},
			submitData() {
				let str = "";
				if (this.list.length > 6) {
					uni.showToast({
						title: "最多上传6张图片",
						icon: 'none'
					});
					return;
				}
				if (this.list != null) {
					for (var i = 0; i < this.list.length; i++) {
						str += this.list[i] + "|";
					}
				}
				if (str == "") {
					if (this.content == "") {
						uni.showToast({
							title: "请输入内容",
							icon: 'none'
						});
						return;
					}
				}
				uni.request({
					url: this.$apiHost + '/Article/add',
					data: {
						uuid: getApp().globalData.uuid,
						content: this.content,
						imgs: str,
					},
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'sign': getApp().globalData.headerSign
					},
					dataType: 'json',
					success: (res) => {
						console.log("----", res.data);
						uni.showToast({
							title: res.data.str,
							icon: 'none'
						});
						if (res.data.success == "yes") {
							this.list = [];
							this.content = "";
							setTimeout(function() {
								uni.navigateBack()
							}, 800);
						}
					}
				});

			},
			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: `最多上传${this.maxImageCount}张图片`,
						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)
										// console.log('Success11:', uploadFileRes);
										// console.log('Success21:', resdata);
										if (resdata.success == 'yes') {
											that.list.push(resdata.url);
											// _self.avator = 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 'addArticle.scss';
</style>