之前用upload组件进行上传都是用的非手动上传,现在用到手动上传做个演示发现不执行beforeUpload方法。
:auto-upload="false" beforeUpload方法是不生效的,可以使用:on-change进行图片类型及大小限制
<el-upload action="#"
accept=".jpg,.jpeg,.png"
:file-list="fileList"
list-type="picture-card"
:on-change="handleChange"
:before-upload="beforeUpload"
:auto-upload="false">
<i slot="default"
class="el-icon-plus"></i>
<div slot="file"
slot-scope="{file}">
<img class="el-upload-list__item-thumbnail"
:src="file.url"
alt="">
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<span v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
<div slot="tip"
class="el-upload__tip">请上传(.jpg,.png,文件大小不超过3M)</div>
</el-upload>
// 非手动上传图片前进行类型判断
beforeUpload (file) {
let fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
let typeInfo = ["jpg", "jpeg", "png"];
fileName = fileName.toLowerCase();
if (!typeInfo.includes(fileName)) {
this.$message({
type: "warning",
message: "请上传jpg或png格式的图片",
});
return false;
}
const isLt2M = file.size < 1024 * 1024 * 3;
if (!isLt2M) {
this.$message({
type: "warning",
message: "上传图片大小不能超过3M",
});
return false;
}
}