前言:在项目中经常会遇到文件上传的时候限制上传文件大小,限制上传文件格式,限制上传的图片尺寸,今天做一下上传总结。
文章目录
-
三、限制上传文件格式
一、限制上传文件大小
<el-upload
action="javascript:void(0)"
list-type="picture-card"
:show-file-list="false"
:multiple="multiple"
:before-upload="beforeUpload"
:http-request="onRequest"
>
<i class="el-icon-plus"></i>
</el-upload>
//主要是在上传之前的方法里面进行操作,maxSize为自定义的文件格式大小
beforeUpload(file) {
if (file.size / 1024 / 1024 > this.maxSize) {
this.$message.error({
message: `上传文件大小不能超过${this.maxSize}M!`,
});
return false;
}
}
二、限制上传图片尺寸
<el-upload
action="javascript:void(0)"
list-type="picture-card"
:show-file-list="false"
:multiple="multiple"
:before-upload="beforeUpload"
:http-request="onRequest"
>
<i class="el-icon-plus"></i>
</el-upload>
//主要是在上传之前的方法里面进行操作,imageSizeType是定义的上传文件大小的类型,可自行修改或不使用
beforeUpload(file) {
// 限制图片的大小
let isSize;
if (this.imageSizeType && this.imageSizeType == 0) {
isSize = new Promise(function (resolve, reject) {
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function () {
let valid = img.width == 48 && img.height == 48;
valid ? resolve() : reject();
};
img.src = _URL.createObjectURL(file);
}).then(
() => {
return file;
},
() => {
this.$message.error("上传图片尺寸只能是 48*48 px !");
return Promise.reject();
return false;
}
);
return isSize;
} else if (this.imageSizeType && this.imageSizeType == 1) {
isSize = new Promise(function (resolve, reject) {
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function () {
let valid = img.width == 1000 && img.height == 800;
valid ? resolve() : reject();
};
img.src = _URL.createObjectURL(file);
}).then(
() => {
return file;
},
() => {
this.$message.error("上传图片尺寸只能是 1000*800 px !");
return Promise.reject();
return false;
}
);
return isSize;
}
},
}
!!! 注意此处限制上传图片尺寸有一个坑,因为这是封装的一个upload上传组件,可多处使用,由于每个地方可能限制的图片尺寸不同,刚开始是从父组件把限制的尺寸大小传给子组件,这样一个方法就搞定,后来发现是没有效果的,需要有一个尺寸类型就写一个if条件来判断,不知道因为什么,如果不封装组件这个坑就不存在。
三、限制上传文件类型
<el-upload
ref="uploadFile"
:action="`${baseUrl}/invoiceSearch/uploadZip`"
:before-upload="handleBeforeUpload"
class="upload-demo"
:data="{
pid: form.methods,
}"
drag
:headers="uploadHeader"
:on-error="handleError"
:on-success="handleUploadSuccess"
:show-file-list="false"
>
<div class="upload-tips">
点击上传或者将文件拖放此区域任意位置
</div>
<i class="el-icon-upload"></i>
<div class="upload-img">上传文件</div>
<div class="upload-desc">
文件必须为.zip .rar .xlsx 类型
</div>
</el-upload>
// 上传之前
handleBeforeUpload(file) {
let fileName = file.name
let pos = fileName.lastIndexOf('.')
let lastName = fileName.substring(pos, fileName.length)
if (
lastName.toLowerCase() !== '.zip' &&
lastName.toLowerCase() !== '.rar' &&
lastName.toLowerCase() !== '.xlsx'
) {
this.$message.error('文件必须为.zip .rar .xlsx类型')
this.$refs.uploadFile.clearFiles()
return false
}
},
也可以直接使用官方文档使用的 直接限制上传类型,最简单,但是会有局限性,因为在选择文件时也可以点击选择全部文件,这样限制类型就不会生效(accept只针对测试宽松的情况,测试严格就不能偷懒了)