1

src/components/upload/index.vue

@@ -2,54 +2,59 @@
   <div>
     <a-upload
       :action="`${$upload}`"
-      accept='.jpg,.JPG,.png,.PNG,.jpeg,.JPEG'
+      accept=".jpg,.JPG,.png,.PNG,.jpeg,.JPEG"
       list-type="picture-card"
       :headers="uploadHeaders"
       :file-list="fileList"
       @preview="handlePreview"
       @change="handleChange"
+      :beforeUpload="beforeUpload"
     >
       <div v-if="fileList.length < limit">
         <a-icon type="plus" />
         <div class="ant-upload-text">上传图片</div>
       </div>
     </a-upload>
-    <imgModal :previewVisible='previewVisible' :previewImage='previewImage' @handleCancel='handleCancel'/>
+    <imgModal
+      :previewVisible="previewVisible"
+      :previewImage="previewImage"
+      @handleCancel="handleCancel"
+    />
   </div>
 </template>
 
 <script>
-import imgModal from "./imgModal.vue"
+import imgModal from "./imgModal.vue";
 function getBase64(file) {
 	return new Promise((resolve, reject) => {
 		const reader = new FileReader();
 		reader.readAsDataURL(file);
 		reader.onload = () => resolve(reader.result);
-		reader.onerror = error => reject(error);
+		reader.onerror = (error) => reject(error);
 	});
 }
 import store from "@/store";
 export default {
-	components:{
+	components: {
-		imgModal
+		imgModal,
 	},
-	props:{
+	props: {
-		fileList:Array,
+		fileList: Array,
-		limit:{
+		limit: {
-			type:Number,
+			type: Number,
-			default:1
+			default: 1,
-		}
+		},
 	},
 	data() {
-		return{
+		return {
 			previewVisible: false,
-			previewImage: '',
+			previewImage: "",
 			uploadHeaders: {
-				"manage-login-token": store.getters.getToken
+				"manage-login-token": store.getters.getToken,
-			}
+			},
-		}
+		};
 	},
-	methods:{
+	methods: {
 		async handlePreview(file) {
 			if (!file.url && !file.preview) {
 				file.preview = await getBase64(file.originFileObj);
@@ -57,15 +62,24 @@ export default {
 			this.previewImage = file.url || file.preview;
 			this.previewVisible = true;
 		},
-		handleCancel(){
+		handleCancel() {
 			this.previewVisible = false;
 		},
 		handleChange({ fileList }) {
-			this.$emit('handleChange',fileList)
+			this.$emit("handleChange", fileList);
 		},
-	}
+		// 限制50mb
+		beforeUpload(f, l) {
+			const isLt50M = f.size / 1024 / 1024 < 50;
+			if (!isLt50M) {
+				this.$message.error(f.name + "文件大小超出限制，请修改后重新上传");
+				return false;
+			} else {
+				return true;
+			}
+		},
+	},
 };
 </script>
 
-<style>
+<style></style>
-</style>

src/views/Basic/Employee/depend/form.vue

@@ -77,6 +77,7 @@
           :file-list="idcardfileList"
           @preview="handlePreview"
           @change="idcardhandleChange"
+		  :beforeUpload='beforeUpload'
         >
           <div v-if="idcardfileList.length < 2">
             <!-- <a-icon type="plus" /> -->
@@ -133,6 +134,7 @@
 			:file-list="fileList"
 			@preview="handlePreview"
           	@change="fileChange"
+			:beforeUpload='beforeUpload'
           >
             <a-button> <a-icon type="upload"/> 点击上传 </a-button>
           </a-upload>
@@ -379,6 +381,15 @@ export default {
 		fileChange(info) {
 			this.fileList = info.fileList
 		},
+		beforeUpload(f, l) {
+			const isLt50M = f.size / 1024 / 1024 < 50;
+			if (!isLt50M) {
+				this.$message.error(f.name + "文件大小超出限制，请修改后重新上传");
+				return false;
+			} else {
+				return true;
+			}
+		},
 	},
 	watch: {
 		editId: {

src/views/Basic/EstateInfo/_buildingManage/depend/form.vue

@@ -36,6 +36,7 @@
                 :file-list="fileList"
                 @preview="handlePreview"
                 @change="fileChange"
+				:beforeUpload='beforeUpload'
             >
               <a-button> <a-icon type="upload" /> 点击上传 </a-button>
             </a-upload>
@@ -62,6 +63,7 @@
                 :file-list="fileList"
                 @preview="handlePreview"
                 @change="fileChange"
+				:beforeUpload='beforeUpload'
             >
             </a-upload>
             <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
@@ -210,6 +212,15 @@ export default {
 		 edit(){// 楼栋修改
 			this.formType = 2;
 		},
+		beforeUpload(f, l) {
+			const isLt50M = f.size / 1024 / 1024 < 50;
+			if (!isLt50M) {
+				this.$message.error(f.name + "文件大小超出限制，请修改后重新上传");
+				return false;
+			} else {
+				return true;
+			}
+		},
 		submit(){// 楼栋提交
 			let file = []
 			for(let item of this.fileList){

src/views/Basic/EstateInfo/_houseHoldInfo/depend/addForm.vue

@@ -90,6 +90,7 @@
                 @preview="handlePreview"
                 @change="headChange"
                 :file-list="headList"
+                :beforeUpload="beforeUpload"
               >
                 <div v-if="headList.length < 1">
                   <a-icon type="plus" />
@@ -110,6 +111,7 @@
                 @preview="handlePreview"
                 @change="backChange"
                 :file-list="backList"
+                :beforeUpload="beforeUpload"
               >
                 <div v-if="backList.length < 1">
                   <a-icon type="plus" />
@@ -219,6 +221,7 @@
                 accept='.jpg,.JPG,.png,.PNG,.jpeg,.JPEG'
                 @preview="handlePreview"
                 @change="picChange"
+                :beforeUpload="beforeUpload"
                 :file-list="picList"
               >
                 <div v-if="picList.length < 4">
@@ -372,6 +375,15 @@ export default {
 				}
 			})
 		},
+		beforeUpload(f, l) {
+			const isLt50M = f.size / 1024 / 1024 < 50;
+			if (!isLt50M) {
+				this.$message.error(f.name + "文件大小超出限制，请修改后重新上传");
+				return false;
+			} else {
+				return true;
+			}
+		},
 		addClose(){
 			this.$refs.ruleForm.resetFields();
 			this.$emit('close')
@@ -402,17 +414,6 @@ export default {
 		handleCancel() {
 			this.previewVisible = false;
 		},
-		beforeUpload(file) {
-			const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-			if (!isJpgOrPng) {
-				this.$message.error('You can only upload JPG file!');
-			}
-			const isLt2M = file.size / 1024 / 1024 < 2;
-			if (!isLt2M) {
-				this.$message.error('Image must smaller than 2MB!');
-			}
-			return isJpgOrPng && isLt2M;
-		},
 		onChange(value, selectedOptions){
 			if(value.length > 0){
 				this.form.manageEstateId = value[value.length - 1];

src/views/Basic/EstateInfo/_houseManage/depend/form.vue

@@ -103,6 +103,7 @@
               :file-list="fileList"
               @preview="handlePreview"
               @change="fileChange"
+			  :beforeUpload="beforeUpload"
             >
               <div v-if="fileList.length < 2">
                 <!-- <a-icon type="plus" /> -->
@@ -293,6 +294,15 @@ export default {
 			this.fileList = fileList;
 			console.log(this.fileList);
 		},
+		beforeUpload(f, l) {
+			const isLt50M = f.size / 1024 / 1024 < 50;
+			if (!isLt50M) {
+				this.$message.error(f.name + "文件大小超出限制，请修改后重新上传");
+				return false;
+			} else {
+				return true;
+			}
+		},
 	},
 	watch: {
 		editId(val){

src/views/Operation/Announcement/depend/form.vue

@@ -72,6 +72,7 @@
             accept=".doc,.DOC,.xls,.XLS,.xlsx,.XLSX,.pdf,.PDF"
             :headers="uploadHeaders"
             @change="changeFile"
+			:beforeUpload='beforeUpload'
           >
             <a-button> <a-icon type="upload" /> 上传附件</a-button>
           </a-upload>
@@ -129,6 +130,15 @@ export default {
 			this.$emit("success");
 			this.addClose();
 		},
+		beforeUpload(f, l) {
+			const isLt50M = f.size / 1024 / 1024 < 50;
+			if (!isLt50M) {
+				this.$message.error(f.name + "文件大小超出限制，请修改后重新上传");
+				return false;
+			} else {
+				return true;
+			}
+		},
 		submit() {
 			console.log(this.documentList);
 			// 附件