fix: 文件上传限制文件大小

ui/src/views/dataset/component/UploadComponent.vue

@@ -19,6 +19,7 @@
         accept=".txt, .md, .csv, .log, .doc, .docx, .pdf"
         :limit="50"
         :on-exceed="onExceed"
+        :on-change="filehandleChange"
       >
         <img src="@/assets/upload-icon.svg" alt="" />
         <div class="el-upload__text">
@@ -27,7 +28,9 @@
             <em> 选择文件上传 </em>
           </p>
           <div class="upload__decoration">
-            <p>支持格式：TXT、Markdown、PDF、DOC、DOCX，每次最多上传50个文件，每个文件不超过 10MB</p>
+            <p>
+              支持格式：TXT、Markdown、PDF、DOC、DOCX，每次最多上传50个文件，每个文件不超过 10MB
+            </p>
             <p>若使用【高级分段】建议上传前规范文件的分段标识</p>
           </div>
         </div>
@@ -57,7 +60,7 @@
 </template>
 <script setup lang="ts">
 import { ref, reactive, onUnmounted, onMounted, computed, watch } from 'vue'
-import type { UploadProps } from 'element-plus'
+import type { UploadFile, UploadFiles } from 'element-plus'
 import { filesize, getImgUrl } from '@/utils/utils'
 import { MsgError } from '@/utils/message'
 import useStore from '@/stores'
@@ -79,6 +82,17 @@ function deleteFlie(index: number) {
   form.value.fileList.splice(index, 1)
 }
 
+// 上传on-change事件
+const filehandleChange = (file: any, fileList: UploadFiles) => {
+  //1、判断文件大小是否合法，文件限制不能大于10M
+  const isLimit = file?.size / 1024 / 1024 < 10
+  if (!isLimit) {
+    MsgError('文件大小超过 10MB')
+    fileList.splice(-1, 1) //移除当前超出大小的文件
+    return false
+  }
+}
+
 const onExceed = () => {
   MsgError('每次最多上传50个文件')
 }