关于vue+element ui 实现上传文件

html

     <el-upload
            class="upload-demo"
            action="localhost:8185/visitPlan/import"
            :before-upload="beforeAvatarUpload"
            :multiple="true"
            :limit="3"
            :on-exceed="handleExceed">
            <el-button size="small" type="primary" class="fs-btn fs-btn-primary fs-btn-md">导入数据</el-button>
      </el-upload>

判断上传文件的类型

js

     const isXlsx = file.type ==='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
     const isXls = file.type === 'application/vnd.ms-excel'
     const isLt2M = file.size / 1024 / 1024 < 2
     console.log(isXls, isXlsx)
     if (!isXls && !isXlsx) {
     this.$message.error('上传文件必须是xls/xlsx格式!')
     }
     if (!isLt2M) {
     this.$message.error('上传图片大小不能超过 2MB!')
     }
     console.log('error', (isXlsx || isXls) && isLt2M)
     return (isXlsx || isXls)

但是此时碰到一个问题，不知道为什么.xls文件类型在控制台打印是空白，导致.xls文件无法通过判断
于是采用另外一种方式,将文件名切割，判断字符

js

    beforeAvatarUpload (file) {
          console.log(file.name)
          let Xls = file.name.split('.')
          if (Xls[1] === 'xls' || Xls[1] === 'xlsx') {
            return file
          } else {
            this.$message.error('上传文件只能是 xls/xlsx 格式!')
            return false
          }
     }