vue element-ui 限制文件大小不超过多少M

被开发耽误的大厨

已于 2022-03-01 15:11:58 修改

阅读量3.1k

点赞数

分类专栏： web前端（H5）文章标签： vue.js elementui 前端

于 2022-03-01 14:52:21 首次发布

本文为博主原创文章，不得随意转载，转载请注明出处！！！

本文链接：https://blog.csdn.net/YuDBL/article/details/123205439

版权

web前端（H5）专栏收录该内容

83 篇文章 15 订阅

订阅专栏

这篇博客介绍了在Vue项目中如何限制文件上传的大小和格式。通过使用`before-upload`和`on-change`两个事件，实现了在上传前检查文件大小是否超过5M以及文件类型是否为PDF或Excel。当文件大小超过限制或格式不符时，会显示相应的错误提示。此外，还提供了清理缓存和重启服务的解决无效问题的方法。

摘要由CSDN通过智能技术生成

无效方式

有效方式

参考链接

注：

1、项目需求为10M，这里是以5M文件为案例，方便测试！

2、有时候改动不生效：（1）重启 npm run dev （2）清理缓存 ctrl + shift + delete

            <el-upload
              :disabled="addEditDisabled.disable"
              class="upload-demo"
              :on-preview="handlePreview"
              style="display: inline"
              v-if="addEditDisabled.infoHide"
              drag
              :on-change="handleChange"
              :show-file-list="false"
              action="#"
              :multiple="false"
              :auto-upload="false"
              :before-upload="beforeAvatarUpload"
            >

无效方式

放 methods: {} 里面，:before-upload="beforeAvatarUpload" 无效！

    /** 文件大小不超过5M */
    beforeAvatarUpload(file){
      console.log("文件：：："+file)
      const isLtXM = file.size / 1024 / 1024 < 5;
      if(!isLtXM) {
        this.$message({
          message: '上传文件大小不能超过 5MB!',
          type: 'warning'
        });
      }
      return isLtXM
    },

有效方式

放 methods: {} 里面， :on-change="handleChange" 有效！

    handleChange(file, fileList) {
      if (!this.network) {
        this.open = false;
        return this.$message.warning(
          "当前网络已断开，请勿操作数据，否则可能导致数据异常。请等待网络恢复后再操作。"
        );
      }

      // 检查文件
      const fileName = file.name;
      const fileType = fileName
        .substring(fileName.lastIndexOf("."))
        .toLowerCase();
      if (fileType === ".pdf" || fileType === ".xls" || fileType === ".xlsx") {
        console.log("文件格式符合要求" + fileName);
      } else {
        fileList.splice(file, 1);
        return this.$message.error("附件格式仅支持PDF、Excel(xlsx、xls)");
      }

      const isLtXM = file.size / 1024 / 1024 < 5;
      if(!isLtXM) {
        console.log("文件大于5M");
        this.$message.error("上传文件大小不能超过 5MB!");
        return false;
      }else {
        console.log("文件小于5M");
      }

      if(this.allAttachmentNameArr.length > 9){
        return this.$message.error("最多只能上传10个附件")
      }
      for (let i = 0; i < this.allAttachmentNameArr.length; i++) {
        if (this.allAttachmentNameArr[i] == file.name) {
          fileList.splice(file, 1);
          return this.$message.error(
            "已存在相同文件名的合同附件，请修改附件名称后重新上传"
          );
        }
      }
      this.allAttachmentNameArr.push(fileName);

      let reader = new FileReader();

      let u = reader.readAsDataURL(file.raw);

      reader.onload = () => {
        console.log(reader.result);
      };

      this.newAttachmentList.push({
        uid: file.uid,
        name: file.name,
        url: file.url,
        raw: file.raw,
      });

      this.chageAttachment++;

    },