bnyer-cloud-hub/pages/index/upload/upload.vue

<template>
	<view class="page-content">
		<uni-section title="选择图片分类上传" type="circle">
		</uni-section>
		<view class="section-content">
			<view class="type-choice-comp">
				<view class="type-item uni-secondary-color" v-for="(val, i) in typeList" :index="i" :key="i"
					:class="typeCurrent === i ? 'type-active' : ''"
					@click="$noMultipleClicks(onClickType,{currentIndex: i})">
					<view class="type-text">{{val}}</view>
				</view>
			</view>
			<uni-file-picker ref="filePicker" limit="9" title="最多选择9张图片" :file-extname="fileExtname" mode="grid"
				file-mediatype="image" @success="successHandler" @fail="failHandler" @delete="deleteHandler"
				:autoUpload="false" @select="selectHandler" :disabled="checkUpload">
			</uni-file-picker>
			<view class="uploadNum">今日还可上传次数<span class="uploadText"> {{ getUploadNum }} </span>，已上传次数<span
					class="uploadText"> {{ uploadedNum }} </span></view>
		</view>
		<uni-section title="是否原创" subTitle="非原创则视为网络图片" type="circle">
			<view class="original-item-list">
				<uni-data-checkbox multiple v-model="original" :localdata="originalList" :selectedColor="primaryColor"
					:selectedTextColor="primaryColor"></uni-data-checkbox>
			</view>
		</uni-section>
		<view class="sign-box">
			<uni-section title="选择图片标签" subTitle="最多选择3个" type="circle" class="sign-item">
			</uni-section>
			<view class="sign-item-box">
				<button plain="true" size="mini" type="default" class="sign-item-tag" @click="linkTo">自定义标签</button>

			</view>
		</view>

		<view class="section-content">
			<view class="segmented-control">
				<uni-data-checkbox mode="tag" multiple v-model="signListSelected" :localdata="signList"
					@change="selectedSign" max="3" class="check-box"></uni-data-checkbox>
			</view>
		</view>

		<button class="upLoadBtn" size="default" :loading="loadingFlag" @click="$noMultipleClicks(commit)"
			:disabled="checkUpload">点击上传</button>
	</view>
</template>

<script>
	import {
		getSignList,
		listType,
		insertTiktokImg,
		queryUploadNum
	} from '@/api/index.js'
	import {
		deleteFile,
		uploadBatch
	} from '@/api/common.js'
	export default {
		data() {
			return {
				styleType: 'button',
				primaryColor: '#0b6375',
				typeCurrent: 0,
				typeId: 1,
				fileExtname: "png,jpg,jpeg",
				signList: [],
				signObject: {},
				typeList: [],
				typeIdList: [],
				loadingFlag: false,
				fileList: [],
				imgList: [],
				signListSelected: [],
				userInfo: {},
				uploadedNum: 0,
				noClick: true, //防止重复提交
				original: [],
				originalList: [{
					text: "原创",
					value: 1
				}]
			}
		},
		created() {
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo) {
				console.log('havent userInfo')
				uni.showModal({
					content: '艺术家账户过期,请重新登录！',
					showCancel: false,
					success() {
						//没有缓存则跳转登录页面
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}
				});
			} else {
				this.userInfo = userInfo;
				console.log('have userInfo')
			}
			this.getSignList();
			this.getTypeList();
			this.queryUploadNum();
		},
		computed: {
			//计算可上传次数
			getUploadNum() {
				return 50 - this.uploadedNum
			},
			//动态设置上传组件禁用
			checkUpload() {
				return this.uploadedNum >= 50;
			}

		},
		methods: {

			//跳转自定义标签页面
			linkTo() {
				uni.navigateTo({
					url: '/pages/index/upload/customSign'
				});
			},

			//获取标签列表
			async getSignList() {
				let that = this;
				const res = await getSignList({})
				if (res.data.code === 200) {
					for (let s of res.data.data) {
						let signObject = {}
						signObject.text = "#" + s.name
						signObject.value = s.id
						that.signList.push(signObject)
					}
					//console.log('signList',that.signList)
				} else {
					uni.showModal({
						content: '标签列表加载失败！',
						showCancel: false
					});
				}
			},

			//获取分类列表
			async getTypeList() {
				let that = this;
				const res = await listType({})
				if (res.data.code === 200) {
					for (let s of res.data.data) {
						that.typeList.push(s.typeName);
						that.typeIdList.push(s.id);
					}
					//console.log('分类列表',that.typeList)
					//console.log('分类id列表',that.typeIdList)
				} else {
					uni.showModal({
						content: '分类列表加载失败！',
						showCancel: false
					});
				}
			},

			//获取艺术家今日上传图片次数
			async queryUploadNum() {
				let that = this;
				const checkParam = {
					creatorId: that.userInfo.id
				}
				const res = await queryUploadNum(checkParam);
				// console.log(res)
				if (res.data.code === 200) {
					that.uploadedNum = res.data.data;
				} else {
					uni.showModal({
						content: '获取艺术家上传次数失败！',
						showCancel: false
					});
				}
			},
			//选中分类事件
			onClickType(e2) {
				let that = this;
				that.flag = false;
				that.typeCurrent = e2.currentIndex;
				that.typeId = that.typeIdList[e2.currentIndex];
				//console.log('typeId',that.typeId)
				uni.showLoading({
					title: "加载中",
					mask: true,
					complete() {
						uni.hideLoading();
					},
				});
			},

			//选中标签事件
			selectedSign(e) {
				let that = this;
				that.signListSelected = e.detail.value;
				//console.log('that.signListSelected'+that.signListSelected);
			},
			//文件上传成功监听事件
			successHandler(e) {
				// console.log('文件上传成功！'+e)
			},
			//選擇文件监听事件
			selectHandler(e) {
				const maxSize = 5 * 1024 * 1024
				if (!e.tempFiles) {
					return;
				}
				let current_file =  e.tempFiles[0]
				if(current_file.size > maxSize){
					uni.showModal({
						content: "当前文件大小超过5mb,请重新选择小雨5mb的文件进行上传！",
						showCancel: false
					});
					const index = this.$refs.filePicker.files.indexOf(current_file);
					this.$refs.filePicker.files.splice(index, 1);
					return
				}
				let that = this;
				that.fileList = [...that.fileList, ...e.tempFilePaths];
				//检查是否可上传文件
				if (that.uploadedNum >= 50) {
					uni.showModal({
						content: "当日已达上传图片上限,请明日再来！",
						showCancel: false
					});

				}
				// that.uploadHandler(e.tempFilePaths)
			},
			//文件上传失败监听事件
			failHandler(e) {
				// console.log('文件上传失败！'+e)
			},
			//文件删除监听事件
			deleteHandler(e) {
				// console.log('文件删除',e.tempFile.url)
				//调用文件删除方法
				let that = this;
				that.fileList = that.fileList?.filter?.(item => {
					item !== e.tempFile;
				})
			},
			commit() {
				let that = this;
				if (that.fileList.length === 0) {
					uni.showModal({
						content: "请选择图片上传！",
						showCancel: false,
					});
					return;
				}
				that.uploadHandler(that.fileList);
			},
			//上传文件监听事件
			uploadHandler: async function(e) {
				let that = this;
				uni.showLoading({
					title: "上传中"
				});
				const tempFilePaths = e;
				for (var i = 0; i < tempFilePaths.length; i++) {
					//const tempFile = e.tempFiles[i];
					const [error, res] = await uni.uploadFile({
						url: `${that.$baseURL}${that.$uploadURL}`,
						filePath: tempFilePaths[i],
						name: `files`,
						formData: {
							fileType: that.typeCurrent + 1
						},
						header: {
							"Content-Type": "multipart/form-data",
						},
						// success:(uploadFileRes) => {
						//   // uni.hideLoading();
						//   const back = JSON.parse(uploadFileRes.data);
						//     if (back.code == 200) {
						//       that.imgList.push(back.data);
						//     }
						//   },
						// fail:() => {
						//   uni.hideLoading();
						//   uni.showModal({
						//     content: "上传失败，请联系客服！"
						//   });
						// },
						// complete: function() {
						//   uni.hideLoading();
						// }
					});
					const {
						data,
						code
					} = JSON.parse(res.data);
					if (code == 200) {
						that.imgList.push(data[0])
					}
				}

				this.saveImg()

			},
			//提交表单
			saveImg() {
				let that = this;
				//判断是否有上传图片
				if (that.imgList.length === 0) {
					uni.showModal({
						content: "请选择图片上传！",
						showCancel: false,
					});
					return;
				}
				//检查是否可上传文件
				if (that.uploadedNum >= 50) {
					uni.showModal({
						content: "当日已达上传图片上限,请明日再来！",
						showCancel: false
					});
				} else {
					const param = {
						creatorId: that.userInfo.id,
						imgUrl: that.imgList,
						signList: that.signListSelected,
						status: 0,
						typeId: that.typeId,
						isOriginal: that.original?.length > 0 ? 1 : 0
					}
					insertTiktokImg(param).then(res => {
						// console.log('res',res)
						if (res.data.code === 200) {
							uni.hideLoading();
							uni.showToast({
								title: '上传成功!',
								duration: 2000,
								success: function() {
									setTimeout(function() {
										//返回主页，清空上传列表
										that.imgList = []
										that.signListSelected = []
										that.typeId = 1
										uni.reLaunch({
											url: '../index'
										});
									}, 2000);
								}
							});
						} else {
							uni.hideLoading();
							uni.showModal({
								content: "艺术家图片上传失败！",
								showCancel: false,
							});
						}
					});
				}
			}
		},
		watch: {
			typeId(newValue) {
				if (newValue === 2) { //gif
					this.fileExtname = "gif";
				} else {
					this.fileExtname = "png,jpg,jpeg";
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		min-height: 100vh;
		background: $uni-bg-color;
		width: 750rpx;

		::v-deep .uni-section {
			background: none !important;
			margin-top: 0 !important;
			color: $uni-white;
		}

		::v-deep .uni-section__content-title {
			color: $uni-white !important;
			font-size: 28rpx !important;
		}

		.original-item-list {
			width: 654rpx;
			margin: 0 auto;

			::v-deep .checklist-text {
				color: $uni-secondary-color !important;
				font-size: 24rpx !important;
			}

			::v-deep .is-checked .checklist-text {
				color: $uni-primary !important;
				font-size: 24rpx !important;
			}

		}

		.sign-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 750rpx;

			.sign-item {
				z-index: 0;
				width: 300rpx;
			}

			.sign-item-box {
				margin-right: 50rpx;
				margin-top: 15rpx;
				z-index: 0;

				.sign-item-tag {
					color: #fff;
				}

				.custom-sign {
					z-index: 0;
				}
			}
		}


		.section-content {
			width: 654rpx;
			margin: 0 auto;
		}

		.type-choice-comp {
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
			overflow: scroll;
			padding-top: 20rpx;
			padding-bottom: 20rpx;

			.type-item {
				font-size: 24rpx;
				line-height: 40rpx;
				height: 40rpx;
				padding: 0 20rpx;
				border-radius: 20rpx;
				flex-shrink: 0;

				.type-text {}

			}

			.type-active {
				background: $uni-primary;
				color: $uni-white !important;

			}

		}

		::v-deep .file-title {
			color: $uni-white !important;
			font-size: 24rpx !important;
		}

		::v-deep .file-count {
			color: $uni-white !important;
			font-size: 24rpx !important;
		}

		::v-deep .file-picker__box-content {
			border-color: $uni-secondary-color !important;
		}

		::v-deep .icon-add {
			background-color: $uni-secondary-color !important;
		}

		.uploadNum {
			color: $uni-white;
			font-size: 24rpx;
			margin-top: 20rpx;
			margin-bottom: 20rpx;

			.uploadText {
				color: $uni-primary;
				font-weight: 600;
			}
		}

		.segmented-control {


			::v-deep .checklist-box {
				border: none !important;
				background: none !important;
				margin-right: 0 !important;
			}

			::v-deep .checklist-text {
				color: $uni-secondary-color !important;
				font-size: 24rpx !important;
			}

			::v-deep .is-checked .checklist-text {
				color: $uni-primary !important;
				font-size: 24rpx !important;
			}

			::v-deep .is-disable .checklist-text {
				color: $uni-base-color !important;
				font-size: 24rpx !important;
			}

		}

		.upLoadBtn {
			width: 654rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: linear-gradient(180.00deg, $uni-white 0%, $uni-white 100%);
			margin: 60rpx auto;
			color: $uni-btn-text-color;
			border-radius: 20rpx;
			font-size: 28rpx;
			z-index: 0;
		}

	}
</style>