Element-ui upload组件 上传文件类型限制

一、接受文件类型 accept=".pdf, .doc, .docx, .xls, .xlsx",但是当选择弹出本地选择文件时候可以切换到所有文件,接受文件类型得不到限制


    
      
        上传文件
      
    
    上传文件只能是 pdf、doc、docx、xls、xlsx格式

Element-ui upload组件 上传文件类型限制_第1张图片

二、解决方法:上传之前 before-upload 判断文件类型 

before-upload 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。

// this.$msg(); 为自定义全局提示
// 上传文件之前
beforeUpload(file) {
  const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
  const extension1 = fileSuffix === "pdf";
  const extension2 = fileSuffix === "doc";
  const extension3 = fileSuffix === "docx";
  const extension4 = fileSuffix === "xls";
  const extension5 = fileSuffix === "xlsx";

  if (!extension1 && !extension2 && !extension3 && !extension4 && !extension5) {
    this.$msg("上传文件只能是 pdf、doc、docx、xls、xlsx格式", "error");
  }
  return extension1 || extension2 || extension3 || extension4 || extension5;
},
// 上传成功
upSuccess(e) {
  this.$msg("上传成功");
},
// 上传失败
upError(e) {
  this.$msg("上传失败", "error");
},

 

你可能感兴趣的:(Vue)