element ui 文件上传限制文件类型

最新推荐文章于 2024-07-25 18:52:10 发布

原创最新推荐文章于 2024-07-25 18:52:10 发布 · 7.7k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #vue.js #javascript

本文介绍了如何在前端使用Element UI的上传组件时，通过`accept`属性限制文件类型，并避免冒泡事件和列表刷新问题。通过在选择文件阶段进行预判，确保只允许jpg和png格式的文件上传。

问题描述：

限制文件的上传类型，在change事件或者是成功的回调函数中，做限判断会触发事件冒泡，并且无法删除页面上的展示列表中的文件

解决方案：

在用户选择文件的时候就只能选择对应文件的类型

实现方式：

template:

<el-form-item label="附件：">
    <el-upload
      accept=".jpg,.png"  //关键
      action="文件上传的位置"
      :limit="1"
      :before-upload="beforeUpload" //上传文件之前的钩子，参数为上传的文件，若返回 false 或者返        
                                       回 Promise 且被 reject，则停止上传
      :on-success="upSuccess"  //文件上传成功时的钩子
      :on-error="upError" //文件上传失败时的钩子
    >
      <el-button size="small" type="primary">
        上传文件
      </el-button>
    </el-upload>
    <span>上传文件只能是 jpg,png格式</span>
</el-form-item>

methods:

beforeUpload(file) {
  const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
 
  const whiteList = ["jpg", "png"];
 
  if (whiteList.indexOf(fileSuffix) === -1) {
    this.message({message:"上传文件只能是 jpg,png格式", type: 'warning'});
    return false;
    
  }
},
// 上传成功
upSuccess(file) {
  this.message({message:"上传成功", type: 'success'});
},
// 上传失败
upError(file) {
  this.message.error("上传失败");
},