vue+elementui 上传文件时限制上传文件的类型和大小

最新推荐文章于 2024-12-17 14:01:12 发布

小涵涵是程序媛

最新推荐文章于 2024-12-17 14:01:12 发布

阅读量2.7k

点赞数 4

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/m0_52263688/article/details/115462438

版权

本文介绍了如何在Vue+ElementUI的上传组件中设置`before-upload`属性，以限制用户只能上传Excel（xlsx、xls）格式且大小不超过500KB的文件。通过检查文件的后缀名和大小来实现这一功能，当文件类型或大小不符合要求时，会显示警告消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue+elementui 上传文件时限制上传文件的类型和大小

重点属性–:before-upload="beforeAvatarUpload"

html代码：

<el-upload class="upload-demo"
                       ref="upload1"
                       :action="baseUrl+'/module/v1/manage/'"
                       :data="{optype:'1',productid:this.formInline.productidDetails,
                       modulename:this.formInline.modulenameDetails,desc:this.formInline.descDetails,
                       username:this.updateuser,moduleid:this.moduleidDetails}"
                       :file-list="fileList1"
                       :before-upload="beforeAvatarUpload"
                       :auto-upload="false">
              <el-button slot="trigger"
                         size="small"
                         type="">选取文件</el-button>
              <div slot="tip"
                   style="width: 260px;"
                   class="el-upload__tip">只能上传excel格式文件，文件不能超过500kb</div>
            </el-upload>

js代码：

    beforeAvatarUpload1 (file) {
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension3 = testmsg === 'xlsx'
      this.extension3 = extension3
      const extension4 = testmsg === 'xls'
      this.extension4 = extension4
      const isLt2M1 = file.size / 1024 < 500
      this.isLt2M1 = isLt2M1
      if (!this.extension3 && !this.extension4) {
        this.$message({
          message: '上传文件只能是excel格式!',
          type: 'warning'
        });
      }
      if (!isLt2M1) {
        this.$message({
          message: '上传文件大小不能超过 500kB!',
          type: 'warning'
        });
      }
      return this.extension3 || this.extension4 && isLt2M1
    },