el-upload上传文件大小限制

当我们在使用element做上传文件的时候，会有要求做上传文件的大小限制这个需求，今天我们就来讲一下限制大小这个功能：

首先先讲一下流程，当文件超过20MB的时候让他提示

文件大小不能超过20MB，请重新上传。

下面我们来看代码：

<el-upload
   class="upload-demo" ref="upload" name="upload" :action="action()"
    :on-change="(file, fileList) => {handleChange(file, fileList, scope);} "
    :on-remove=" (file, fileList) => {handleRemove(file, scope);}"
    :file-list="scope.row.fileList"
    :auto-upload="false"
     >
       <el-button  slot="trigger" size="mini" type="primary" v-if="scope.row.fileList.length == 0" >上传文件</el-button>
</el-upload>
           

首先在el-upload的:on-change事件里的handleChange的方法中可以获取上传文件的大小

handleChange(file, fileList, scope) {
		//获取上传文件大小
      let imgSize = Number(file.size / 1024 / 1024);

      if (imgSize > 20) {
        this.$msgbox({
          title: "",
          message: "文件大小不能超过20MB，请重新上传。",
          type: "warning",
        });
        this.materialList[scope.$index].fileList.splice(scope.index, 1);
        return;
      } 
      this.text = "上传中";

      this.loading = true;
      this.materialList[scope.$index].fileList.push(file);
      let data = new FormData();
      data.append("files", file.raw);
      uploadFile(data, scope.row.materialName).then((response) => {
        if (response.success) {
          this.loading = false;
          this.listedFiles[scope.$index] = response.result[0].id;
        } else {
          this.loading = false;
          this.msgError(response.message || "操作失败");
        }
      });
    },
           

以上就是一个完整的例子，希望对你有所帮助