Vue+elementUI实现上传功能

152 阅读1分钟
 <el-upload
              class="upload-demo"
              action="string"
              accept=".xlsx,.xls"
              :on-success="handsuccess"
              :before-upload="handbeforeupload"
              :http-request="httpRequest"
            >
    <el-button size="small" type="danger" plain>点击上传</el-button>
 </el-upload>
      // 上传之前的钩子
    handbeforeupload(file) {
      console.log("上传之前", file);
      const isExcel =
        file.name.split(".")[1] === "xlsx" || file.name.split(".")[1] === "xls";
      const isSize = file.size / 1024 / 1024 < 1;
      if (!isExcel) {
        this.$message({
          message: "只能上传xls或xlsx文件!",
          type: "warning",
          showClose: true,
        });
      }
      if (!isSize) {
        this.$message({
          message: "上传文件大小不能超过 1MB!",
          type: "warning",
          showClose: true,
        });
      }
      return isExcel && isSize;
    },

    //  覆盖默认上传行为
    httpRequest(params) {
      let fd = new FormData();
      fd.append("file", params.file);
      updomApi(fd)
        .then((res) => {
          if (res.resultCode == 0) {
            console.log(res);
            this.$message({
              message: "上传成功",
              type: "success",
              showClose: true,
            });
          } else if (res.resultCode == 500) {
            this.$message({
              message: res.resultMsg,
              type: "warning",
              showClose: true,
            });
          }
        })
        .catch((err) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
          this.$message({ message: err, type: "warning", showClose: true });
        });
    },
     }