elementUI+el-upload 上傳文件大小與文件類型校驗
https://blog.csdn.net/weixin_38659265/article/details/89447469
elementUI+Vue 驗證上傳文件的類型
http://www.reibang.com/p/49e90bea086c
1)嵌入組件
<el-upload
accept="image/jpeg,image/gif,image/png"
class="upload-demo upload-tip"
:action="uploadUrl()"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="onsuccsess"
:before-remove="beforeRemove"
multiple
:before-upload="beforeUpload"
:file-list="fileList">
<el-button size="small" type="primary">點擊上傳</el-button>
<div slot="tip" class="el-upload__tip">只能上傳jpg/png/gif文件危纫，且至少上傳1張,大小不超過200kb</div>
</el-upload>
2）第一種文件類型校驗
直接在el-upload中加上下面這一行就好，這適用于文件類型比較常見的棋傍，文件類型可選擇性比較少時
accept="image/jpeg,image/gif,image/png"
3）第二種適用與校驗文件類型比較多時停撞，可以在beforeUpload方法中進(jìn)行過濾：
beforeUpload(file) {
var FileExt = file.name.replace(/.+\./, "");
if (['jpg','png','txt','zip', 'rar','pdf','doc','docx','xlsx'].indexOf(FileExt.toLowerCase()) === -1){
this.$message({
type: 'warning',
message: '請上傳后綴名為jpg蒙幻、png漓雅、txt、pdf耕渴、doc拘悦、docx、xlsx橱脸、zip或rar的附件础米！'
});
return false;
}
},
4）文件大小校驗
可以在beforeUpload方法中進(jìn)行過濾：
this.isLt2k = file.size / 1024 < 200?'1':'0';
if(this.isLt2k==='0') {
this.$message({
message: '上傳文件大小不能超過200k!',
type: 'error'
});
}
return this.isLt2k==='1'?true: false;
5）beforeRemove方法中需要把不符合大小的文件自動移除
beforeRemove(file, fileList) {
if(this.isLt2k==='1'||this.isLt2k === ''){
return this.$confirm(`確定移除 ${file.name}`);
} else if(this.isLt2k==='0') {
return true;
}
}
- 格式校驗?zāi)抢锓治绻欠欠ǜ袷剑皇峭Ｖ股蟼髌ㄉ＃岸祟A(yù)覽展示那里還有你剛剛上傳的非法格式文件医寿。
需要在這里 清除過濾掉不展示 不符合要求的文件。
// 組件配置項
:before-remove="beforeRemove"
//--------
// 刪除上傳的文件
beforeRemove(file, fileList) {
// debugger
// 上傳文件不合法直接情況上傳預(yù)覽列表蘑斧，不顯示上傳文件預(yù)覽信息
var FileExt = file.name.replace(/.+\./, '')
// 合法文件類型
if (['jpg', 'jpeg', 'png', 'text', 'zip', 'rar', 'pdf', 'doc', 'docx', 'xlsx'].indexOf(FileExt.toLowerCase()) === -1 || file.size / 1024 / 1024 > 50) {
this.fileList = []
} else {
// return this.$confirm(`確定移除${file.name}?`)
return this.$confirm(`確定移除${file.name}?`, '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 情況上傳文件列表
this.fileList = []
this.$message({
type: 'success',
message: '刪除成功!'
})
})
}
}
