網站首頁 編程語言 正文
element-ui upload組件 上傳文件類型限制
<el-upload
class="c-upload"
ref="upload"
:action="actions"
:headers="myHeaders"
:data="myData"
:limit='limit'
accept=".xls,.xlsx"
:on-exceed="onExceed"
:on-change="onChange"
:on-success="onSuccess"
:on-error="onError"
:file-list="fileList"
:before-upload="beforeUpload"
:auto-upload="false"
>
<el-button
slot="trigger"
size="small"
type="primary"
>選取文件</el-button>
<div
slot="tip"
class="el-upload__tip"
>只能上傳xls/xlsx文件,且不超過一個</div>
</el-upload>
上傳之前:before-upload="beforeUpload"再次判斷文件類型
beforeUpload(file) {
console.log(file)
var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
const extension = testmsg === 'xls'
const extension2 = testmsg === 'xlsx'
// const isLt2M = file.size / 1024 / 1024 < 10
if(!extension && !extension2) {
this.$message({
message: '上傳文件只能是 xls、xlsx格式!',
type: 'warning'
});
}
// if(!isLt2M) {
// this.$message({
// message: '上傳文件大小不能超過 10MB!',
// type: 'warning'
// });
// }
// return extension || extension2 && isLt2M
return extension || extension2
},
原文鏈接:https://blog.csdn.net/zz975896590/article/details/119991179
相關推薦
- 2023-03-16 PostgreSQL?復制表的?5?種方式詳解_PostgreSQL
- 2022-04-17 C語言實現簡易通訊錄完整流程_C 語言
- 2022-05-22 redis數據結構之壓縮列表_Redis
- 2022-04-08 從頭學習C語言之switch語句和分支嵌套_C 語言
- 2022-12-13 Flutter?阻止系統鍵盤彈出的優雅方式_Android
- 2022-10-05 C++淺析數據在內存中如何存儲_C 語言
- 2022-04-05 Android判斷是否Root方法介紹_Android
- 2023-04-18 Python之split函數的深入理解_python
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支