feat 针对于大于5mb的文件 进行提示 删除

pages/index/upload/upload.vue

@@ -4,28 +4,23 @@
 		</uni-section>
 		<view class="section-content">
 			<view class="type-choice-comp">
-			        <view class="type-item uni-secondary-color" v-for="(val, i) in typeList"
+				<view class="type-item uni-secondary-color" v-for="(val, i) in typeList" :index="i" :key="i"
-			              :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 limit="9" title="最多选择9张图片"
+			<uni-file-picker ref="filePicker" limit="9" title="最多选择9张图片" :file-extname="fileExtname" mode="grid"
-			                       :file-extname="fileExtname" mode="grid"
+				file-mediatype="image" @success="successHandler" @fail="failHandler" @delete="deleteHandler"
-			                       file-mediatype="image"
+				:autoUpload="false" @select="selectHandler" :disabled="checkUpload">
-			                       @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 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>
+				<uni-data-checkbox multiple v-model="original" :localdata="originalList" :selectedColor="primaryColor"
+					:selectedTextColor="primaryColor"></uni-data-checkbox>
 			</view>
 		</uni-section>
 		<view class="sign-box">
@@ -39,20 +34,26 @@
 
 		<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>
+				<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>
+		<button class="upLoadBtn" size="default" :loading="loadingFlag" @click="$noMultipleClicks(commit)"
+			:disabled="checkUpload">点击上传</button>
 	</view>
 </template>
 
 <script>
 	import {
-		getSignList,listType,insertTiktokImg,queryUploadNum
+		getSignList,
+		listType,
+		insertTiktokImg,
+		queryUploadNum
 	} from '@/api/index.js'
 	import {
-		deleteFile,uploadBatch
+		deleteFile,
+		uploadBatch
 	} from '@/api/common.js'
 	export default {
 		data() {
@@ -62,21 +63,22 @@
 				typeCurrent: 0,
 				typeId: 1,
 				fileExtname: "png,jpg,jpeg",
-				signList:[],
+				signList: [],
-				signObject:{},
+				signObject: {},
-				typeList:[],
+				typeList: [],
-				typeIdList:[],
+				typeIdList: [],
 				loadingFlag: false,
 				fileList: [],
-				imgList:[],
+				imgList: [],
-				signListSelected:[],
+				signListSelected: [],
-				userInfo:{},
+				userInfo: {},
 				uploadedNum: 0,
-				noClick:true, //防止重复提交
+				noClick: true, //防止重复提交
 				original: [],
-        originalList: [
+				originalList: [{
-          {text: "原创", value: 1}
+					text: "原创",
-        ]
+					value: 1
+				}]
 			}
 		},
 		created() {
@@ -101,13 +103,13 @@
 			this.getTypeList();
 			this.queryUploadNum();
 		},
-		computed:{
+		computed: {
 			//计算可上传次数
-			getUploadNum(){
+			getUploadNum() {
 				return 50 - this.uploadedNum
 			},
 			//动态设置上传组件禁用
-			checkUpload(){
+			checkUpload() {
 				return this.uploadedNum >= 50;
 			}
 
@@ -115,20 +117,20 @@
 		methods: {
 
 			//跳转自定义标签页面
-			linkTo(){
+			linkTo() {
 				uni.navigateTo({
 					url: '/pages/index/upload/customSign'
 				});
 			},
 
 			//获取标签列表
-			async getSignList(){
+			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.text = "#" + s.name
 						signObject.value = s.id
 						that.signList.push(signObject)
 					}
@@ -142,17 +144,17 @@
 			},
 
 			//获取分类列表
-			async getTypeList(){
+			async getTypeList() {
 				let that = this;
 				const res = await listType({})
-				if(res.data.code === 200){
+				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{
+				} else {
 					uni.showModal({
 						content: '分类列表加载失败！',
 						showCancel: false
@@ -161,16 +163,16 @@
 			},
 
 			//获取艺术家今日上传图片次数
-			async queryUploadNum(){
+			async queryUploadNum() {
 				let that = this;
 				const checkParam = {
 					creatorId: that.userInfo.id
 				}
 				const res = await queryUploadNum(checkParam);
 				// console.log(res)
-				if(res.data.code === 200){
+				if (res.data.code === 200) {
 					that.uploadedNum = res.data.data;
-				}else{
+				} else {
 					uni.showModal({
 						content: '获取艺术家上传次数失败！',
 						showCancel: false
@@ -178,7 +180,7 @@
 				}
 			},
 			//选中分类事件
-			onClickType(e2){
+			onClickType(e2) {
 				let that = this;
 				that.flag = false;
 				that.typeCurrent = e2.currentIndex;
@@ -194,26 +196,35 @@
 			},
 
 			//选中标签事件
-			selectedSign(e){
+			selectedSign(e) {
 				let that = this;
 				that.signListSelected = e.detail.value;
 				//console.log('that.signListSelected'+that.signListSelected);
 			},
 			//文件上传成功监听事件
-			successHandler(e){
+			successHandler(e) {
 				// console.log('文件上传成功！'+e)
 			},
 			//選擇文件监听事件
-			selectHandler(e){
+			selectHandler(e) {
-				console.log(e,1111)
+				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];
-		console.log(that.fileList,333)
 				//检查是否可上传文件
-				if(that.uploadedNum >= 50){
+				if (that.uploadedNum >= 50) {
 					uni.showModal({
 						content: "当日已达上传图片上限,请明日再来！",
 						showCancel: false
@@ -223,11 +234,11 @@
 				// that.uploadHandler(e.tempFilePaths)
 			},
 			//文件上传失败监听事件
-			failHandler(e){
+			failHandler(e) {
 				// console.log('文件上传失败！'+e)
 			},
 			//文件删除监听事件
-			deleteHandler(e){
+			deleteHandler(e) {
 				// console.log('文件删除',e.tempFile.url)
 				//调用文件删除方法
 				let that = this;
@@ -247,13 +258,12 @@
 				that.uploadHandler(that.fileList);
 			},
 			//上传文件监听事件
-      uploadHandler: async function(e){
+			uploadHandler: async function(e) {
 				let that = this;
 				uni.showLoading({
 					title: "上传中"
 				});
 				const tempFilePaths = e;
-		console.log(tempFilePaths,111)
 				for (var i = 0; i < tempFilePaths.length; i++) {
 					//const tempFile = e.tempFiles[i];
 					const [error, res] = await uni.uploadFile({
@@ -261,9 +271,9 @@
 						filePath: tempFilePaths[i],
 						name: `files`,
 						formData: {
-				fileType:that.typeCurrent + 1
+							fileType: that.typeCurrent + 1
 						},
-            header:{
+						header: {
 							"Content-Type": "multipart/form-data",
 						},
 						// success:(uploadFileRes) => {
@@ -283,7 +293,10 @@
 						//   uni.hideLoading();
 						// }
 					});
-          const {data,code} = JSON.parse(res.data);
+					const {
+						data,
+						code
+					} = JSON.parse(res.data);
 					if (code == 200) {
 						that.imgList.push(data[0])
 					}
@@ -293,10 +306,10 @@
 
 			},
 			//提交表单
-			  saveImg(){
+			saveImg() {
 				let that = this;
 				//判断是否有上传图片
-				if(that.imgList.length === 0){
+				if (that.imgList.length === 0) {
 					uni.showModal({
 						content: "请选择图片上传！",
 						showCancel: false,
@@ -304,12 +317,12 @@
 					return;
 				}
 				//检查是否可上传文件
-				if(that.uploadedNum >= 50){
+				if (that.uploadedNum >= 50) {
 					uni.showModal({
 						content: "当日已达上传图片上限,请明日再来！",
 						showCancel: false
 					});
-				}else{
+				} else {
 					const param = {
 						creatorId: that.userInfo.id,
 						imgUrl: that.imgList,
@@ -318,15 +331,15 @@
 						typeId: that.typeId,
 						isOriginal: that.original?.length > 0 ? 1 : 0
 					}
-						  insertTiktokImg(param).then(res =>{
+					insertTiktokImg(param).then(res => {
 						// console.log('res',res)
-							if(res.data.code === 200){
+						if (res.data.code === 200) {
 							uni.hideLoading();
 							uni.showToast({
 								title: '上传成功!',
 								duration: 2000,
-									success:function(){
+								success: function() {
-										setTimeout(function () {
+									setTimeout(function() {
 										//返回主页，清空上传列表
 										that.imgList = []
 										that.signListSelected = []
@@ -337,7 +350,7 @@
 									}, 2000);
 								}
 							});
-							}else {
+						} else {
 							uni.hideLoading();
 							uni.showModal({
 								content: "艺术家图片上传失败！",
@@ -393,27 +406,27 @@
 
 		}
 
-	.sign-box{
+		.sign-box {
 			display: flex;
 			flex-wrap: wrap;
 			justify-content: space-between;
-		width:750rpx;
+			width: 750rpx;
 
-		.sign-item{
+			.sign-item {
 				z-index: 0;
 				width: 300rpx;
 			}
 
-		.sign-item-box{
+			.sign-item-box {
 				margin-right: 50rpx;
 				margin-top: 15rpx;
 				z-index: 0;
 
-			.sign-item-tag{
+				.sign-item-tag {
 					color: #fff;
 				}
 
-			.custom-sign{
+				.custom-sign {
 					z-index: 0;
 				}
 			}
@@ -441,9 +454,7 @@
 				border-radius: 20rpx;
 				flex-shrink: 0;
 
-        .type-text {
+				.type-text {}
-
-        }
 
 			}
 
@@ -468,17 +479,18 @@
 		::v-deep .file-picker__box-content {
 			border-color: $uni-secondary-color !important;
 		}
+
 		::v-deep .icon-add {
 			background-color: $uni-secondary-color !important;
 		}
 
-    .uploadNum{
+		.uploadNum {
 			color: $uni-white;
 			font-size: 24rpx;
 			margin-top: 20rpx;
 			margin-bottom: 20rpx;
 
-      .uploadText{
+			.uploadText {
 				color: $uni-primary;
 				font-weight: 600;
 			}
@@ -510,7 +522,7 @@
 
 		}
 
-    .upLoadBtn{
+		.upLoadBtn {
 			width: 654rpx;
 			height: 100rpx;
 			line-height: 100rpx;
@@ -523,5 +535,4 @@
 		}
 
 	}
-  
 </style>