vue el-upload组件上传文件时只限制图片

要实现上传文件时只限制图片,对el-upload加两条属性就可以实现

accept="image/jpg,image/jpeg,image/png"   // 接受上传的文件类型

:before-upload="handleBeforeUpload"   // 上传之前的钩子 类型:function(file)

如果只添加第一行代码,虽然可以让用户在点击上传按钮时,视线范围内只会出现符合图片格式的文件,但是...

vue el-upload组件上传文件时只限制图片_第1张图片

但是,当用户点击右下角选择“所有文件”时,就会看到非图片格式的文件,这样用户还是可以上传非图片格式的文件,限制失败!

vue el-upload组件上传文件时只限制图片_第2张图片

 所以,第二行代码还是必须要的。

代码如下:


  
  

// 判断上传的是否为图片
handleBeforeUpload(file) {
    var img = file.name.substring(file.name.lastIndexOf('.') + 1)
    const suffix = img === 'jpg'
    const suffix2 = img === 'png'
    const suffix3 = img === 'jpeg'
    const isLt1M = file.size / 1024 / 1024 < 1;
    if (!suffix && !suffix2 && !suffix3) {
        this.$message.error("只能上传图片!");
        return false
    }
    // 可以限制图片的大小
    if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 1MB!');
    }
    return suffix || suffix2 || suffix3
},

 注:需要图片尺寸限制的可以点击这篇文章vue elementui 上传图片限制格式、大小和尺寸_Naive_Jam的博客-CSDN博客

你可能感兴趣的:(vue,vue.js,javascript,前端,elementui)