From 63841f7068de038a5862657eeed577c57b2caef8 Mon Sep 17 00:00:00 2001
From: zhaojinfeng <121016171@qq.com>
Date: Fri, 18 Aug 2023 17:03:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(maxsize):=20=E6=9C=80=E5=A4=A7=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E4=BD=93=E7=A7=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/upload-list/index.vue  | 23 ++++++++++++++++++++---
 packages/upload-table/index.vue |  3 +++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/upload-list/index.vue b/packages/upload-list/index.vue
index b786cf9..039a935 100644
--- a/packages/upload-list/index.vue
+++ b/packages/upload-list/index.vue
@@ -2,13 +2,19 @@
  * @Author: zhaojinfeng 121016171@qq.com
  * @Date: 2023-08-16 17:33:41
  * @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-08-16 18:58:09
+ * @LastEditTime: 2023-08-18 17:02:06
  * @FilePath: \vue3\packages\upload-list\index.vue
  * @Description:
  *
 -->
 <template>
-  <el-upload v-model:file-list="userFiles" :accept="accept" :disabled="disabled" :http-request="httpRequest">
+  <el-upload
+    v-model:file-list="userFiles"
+    :accept="accept"
+    :disabled="disabled"
+    :before-upload="beforeUpload"
+    :http-request="httpRequest"
+  >
     <el-button type="primary" plain>
       点击上传
     </el-button>
@@ -16,7 +22,7 @@
 </template>
 
 <script lang="ts" setup name="ThUploadList">
-import type { UploadRequestOptions, UploadUserFile } from 'element-plus'
+import type { UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
 
 const props = withDefaults(
   defineProps<{
@@ -30,8 +36,11 @@ const props = withDefaults(
     filePath?: string
     /** 禁用组件 */
     disabled?: boolean
+    /** 最大上传大小（Mb） */
+    maxsize?: number
   }>(), {
     fileList: () => [],
+    maxsize: 100,
   },
 )
 
@@ -41,6 +50,14 @@ const emit = defineEmits<{
 
 const userFiles = ref<UploadUserFile[]>([])
 
+function beforeUpload(rawFile: UploadRawFile) {
+  if (rawFile.size > props.maxsize * 1024 * 1024) {
+    const err = `文件大小不能超过${props.maxsize}Mb`
+    ElMessage.error(err)
+    return false
+  }
+  return true
+}
 async function httpRequest({ file, onProgress, onSuccess, onError }: UploadRequestOptions) {
   const formData = new FormData()
   formData.append('file', file)
diff --git a/packages/upload-table/index.vue b/packages/upload-table/index.vue
index 15e7bea..232ce2a 100644
--- a/packages/upload-table/index.vue
+++ b/packages/upload-table/index.vue
@@ -24,6 +24,7 @@
             :max-size="20"
             :file-name="allName[`${row.id}`]"
             :request="request"
+            :maxsize="maxsize"
             @on-change="$event => onChange($event, row.id)"
             @on-success="$event => onSuccess($event, row, $index)"
             @on-error="onError(row.id)"
@@ -100,6 +101,8 @@ const props = withDefaults(defineProps<{
   hideActions?: boolean
   /** 文件上传的请求函数 */
   request?: (formData: FormData) => Promise<FileVO>
+  /** 最大上传大小（Mb） */
+  maxsize?: number
 }>(), {
   accept: '.jpeg,.jpg,.png,.bmp',
   addText: '新增一行',