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

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
    },

又是打工的一天，欢迎大家私信提建议~~~