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

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

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

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

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

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

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

代码如下：

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

// 判断上传的是否为图片
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博客