1919 accept =" .txt, .md, .csv, .log, .doc, .docx, .pdf"
2020 :limit =" 50"
2121 :on-exceed =" onExceed"
22+ :on-change =" filehandleChange"
2223 >
2324 <img src =" @/assets/upload-icon.svg" alt =" " />
2425 <div class =" el-upload__text" >
2728 <em > 选择文件上传 </em >
2829 </p >
2930 <div class =" upload__decoration" >
30- <p >支持格式:TXT、Markdown、PDF、DOC、DOCX,每次最多上传50个文件,每个文件不超过 10MB</p >
31+ <p >
32+ 支持格式:TXT、Markdown、PDF、DOC、DOCX,每次最多上传50个文件,每个文件不超过 10MB
33+ </p >
3134 <p >若使用【高级分段】建议上传前规范文件的分段标识</p >
3235 </div >
3336 </div >
5760</template >
5861<script setup lang="ts">
5962import { ref , reactive , onUnmounted , onMounted , computed , watch } from ' vue'
60- import type { UploadProps } from ' element-plus'
63+ import type { UploadFile , UploadFiles } from ' element-plus'
6164import { filesize , getImgUrl } from ' @/utils/utils'
6265import { MsgError } from ' @/utils/message'
6366import useStore from ' @/stores'
@@ -79,6 +82,17 @@ function deleteFlie(index: number) {
7982 form .value .fileList .splice (index , 1 )
8083}
8184
85+ // 上传on-change事件
86+ const filehandleChange = (file : any , fileList : UploadFiles ) => {
87+ // 1、判断文件大小是否合法,文件限制不能大于10M
88+ const isLimit = file ?.size / 1024 / 1024 < 100
89+ if (! isLimit ) {
90+ MsgError (' 文件大小超过 100MB' )
91+ fileList .splice (- 1 , 1 ) // 移除当前超出大小的文件
92+ return false
93+ }
94+ }
95+
8296const onExceed = () => {
8397 MsgError (' 每次最多上传50个文件' )
8498}
0 commit comments