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() {
@@ -74,9 +75,10 @@
 				uploadedNum: 0,
 				noClick: true, //防止重复提交
 				original: [],
-        originalList: [
+				originalList: [{
-          {text: "原创", value: 1}
+					text: "原创",
-        ]
+					value: 1
+				}]
 			}
 		},
 		created() {
@@ -205,13 +207,22 @@
 			},
 			//選擇文件监听事件
 			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) {
 					uni.showModal({
@@ -253,7 +264,6 @@
 					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({
@@ -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])
 					}
@@ -441,9 +454,7 @@
 				border-radius: 20rpx;
 				flex-shrink: 0;
 
-        .type-text {
+				.type-text {}
-
-        }
 
 			}
 
@@ -468,6 +479,7 @@
 		::v-deep .file-picker__box-content {
 			border-color: $uni-secondary-color !important;
 		}
+
 		::v-deep .icon-add {
 			background-color: $uni-secondary-color !important;
 		}
@@ -523,5 +535,4 @@
 		}
 
 	}
-  
 </style>