Vue 上传组件el-upload 限制只能选图片

前言

一、实现

:before-upload="handleBeforeUpload"

accept="image/jpg,image/jpeg,image/png"

代码如下（示例）：

 <el-upload
      :action="uploadImgUrl"
      list-type="picture-card"
      :on-success="handleUploadSuccess"
      :before-upload="handleBeforeUpload"
      :on-error="handleUploadError"
      name="file"
      :show-file-list="false"
      :headers="headers"
      accept="image/jpg,image/jpeg,image/png"
      style="display: inline-block; vertical-align: top"
    >
 </el-upload>

  methods: {
    handleBeforeUpload(file) {
        var img = file.name.substring(file.name.lastIndexOf('.') + 1)
        const suffix = img === 'jpg'
        const suffix2 = img === 'png'
        const suffix3 = img === 'jpeg'
        if (!suffix && !suffix2) {
          this.$message.error(this.l("Upload file can only be JPG, JPEG, PNG format!"));
          return false
        }
        return suffix || suffix2 || suffix3
    },
}