element-ui上传excel验证

最新推荐文章于 2024-03-20 14:02:19 发布

心若猛虎

最新推荐文章于 2024-03-20 14:02:19 发布

阅读量786

点赞数 1

分类专栏： vue 文章标签： vue 前端 vue.js

本文链接：https://blog.csdn.net/weixin_44278376/article/details/125652673

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

element-ui上传excel默认选固定后缀以及上传校验

//action 上传地址
//accept 点击上传后右侧所有文件的默认选择后缀在这里插入图片描述
//before-upload 上传前对文件进行校验


		 <el-upload
            ref="upload"
            class="upload-demo"
            action="https://*****.cn/api.php/Message/emailImport"
            accept=".xls"
            :on-change="handleChange"
            :before-upload="beforeAvatarUpload"
            :on-success="handlesuccess"
          >
            <el-button size="small" type="primary" icon="el-icon-upload"
              >点击上传</el-button
            >
            <div slot="tip" class="el-upload__tip">
              只能上传模板样式Excel文件
              <a
                style="text-decoration: none"
                href="https://******.cn/file/601b5406e5268813fef47891"
                >点击下载模板</a
              >
            </div>
          </el-upload>
methods:{
	//上传文件效验
    beforeAvatarUpload(file) {
    //后缀是xls、xlsx
      const extension = file.name.split(".")[1] === "xls";
      const extension2 = file.name.split(".")[1] === "xlsx";
      //文件大小
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!extension && !extension2) {
        this.$message.error("上传文件只能是 xls、xlsx 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 2MB!");
        return false;
      }
    }}