feat(maxsize): 最大文件体积

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)

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: '新增一行',