vue+element,上传图片组件，设置允许上传图片的类型引起的相关问题，及解决办法

最新推荐文章于 2025-05-19 11:35:48 发布

小涵涵是程序媛

最新推荐文章于 2025-05-19 11:35:48 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_52263688/article/details/126055830

本文介绍了如何在Element UI的el-upload组件中，通过http-request属性实现文件类型限制，避免用户手动改变文件类型后导致上传所有文件的问题。重点在于beforeAvatarUpload钩子函数的使用和自定义文件格式检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发中，上传图片用到了element中的el-uoload组件

 <el-upload
                  :class="{ disabled: uploadDisabled }"
                  action=""
                  :limit="1"
                  list-type="picture-card"
                  accept=""
                  :http-request="uploadHttpRequestPicture"
                  :before-upload="beforeAvatarUpload"
                  :on-exceed="handleExceed"
                  :on-change="handleLimit"
                  :on-remove="handleRemove"
                  :on-success="handleSuccess"
                >
                  <i class="el-icon-plus"></i>
                  <span class="upImageBsdicAdd">上传照片</span>
                </el-upload>

通常限制上传的类型，我们只需在accept属性设置允许图片上传的类型即可，
当点击上传，自动唤起系统自带的资源管理器，正常情况会限制除了设置的类型，别的类型禁用，
但是有一种特殊情况
![在这里插入图片描述](https://img-blog.csdnimg.cn/aa02f3085eb64fdcadf1b37f5bdfbee0.png
当你手动更换了文件的类型，变为所有文件，这个时候当前所有文件都会放开，因为这个时候相当于用户手动去操作了自己电脑。我们开发无法控制。所以想解决这么问题，就只能通过element中组件属性http-request，来自定义规则

在这里插入代码片  //上传之前
  beforeAvatarUpload(file: any) {
    const testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
    const extension =
      testmsg === "jpg" || testmsg === "jpeg" || testmsg === "png";
    console.log(extension);

    if (!extension) {
      this.$message({
        message: "格式不支持!",
        type: "error",
      });
    }
    return  extension 
  }