今天遇到一个问题,就是在elementui项目中对文件进行上传,上传的类型只能是图片格式。
一开始的想法是通过 accept=".jpg, .png, jpeg" 设置传入文件格式
<el-upload
class="avatar-uploader"
list-type="picture-card"
multiple
:file-list="item.planPictures"
:action="uploadImgUrl"
:headers="uploadHeaders"
accept=".jpg, .png, jpeg"
:on-success="
(res, file) => handleAvatarSuccess(res, file, item)
"
:on-remove="
(file, fileList) => handleRemove(file, fileList, item)
"
:before-upload="beforeAvatarUpload"
>
<el-button size="small" type="file">点击上传图示</el-button>
</el-upload>
结果得到的结果是,点击上传后选择的文件只有,.jpg, .png, jpeg格式。
然后找到以后发现如果修改文件类型,还是可以上传非类型,所以找到了:before-upload="beforeAvatarUpload"这个属性,修改挂载函数beforeAvatarUpload,
beforeAvatarUpload(file) {
const isLt10M = file.size / 1024 / 1024 < 10;
var testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
const extension = testmsg === 'png'
const extension2 = testmsg === 'jepg'
const extension3 = testmsg === 'jpg'
if(!extension && !extension2 && !extension3) {
this.$message({
message: '上传文件只能是 png、jepg、jpg格式的文件',
type: 'warning'
});
}
if (!isLt10M) {
this.$message.error("上传头像图片大小不能超过 10M!");
}
return (extension || extension2 || extension3) && isLt10M;
},