element-ui使用upload的http-request自定义上传图片后隐藏上传图标

使用element-ui实现http-request自定义上传功能，并且上传文件最大个数后隐藏上传图标按钮，也实现了上传图片必填校验功能，还有图片上传成功后的回显功能，而非还没上传接口就自动回显。

<el-form-item label="logo" prop="logo">
  <el-upload
    :class="{ hide: hideUpload }"
    v-loading="loading"
    name="logo"
    action="xxxxxx"
    :http-request="uploadSectionFile"
    list-type="picture-card"
    :multiple="false"
    :on-remove="handleAvatarRemove"
    ref="upload"
    :file-list="imageUrlList"
  >
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-input type="hidden" v-model="form.logo" />
</el-form-item>

<el-input type="hidden" v-model="form.logo" />

这个隐藏域表单主要是为了做图片上传必填校验用

data里：

hideUpload: false, //上传按钮隐藏/展示
limitCount: 1, //最大上传文件数
imageUrlList: [],
// 表单校验
rules: {
     logo: [
       { required: true, message: "Logo不能为空", trigger: "change" },
     ],
},

methods：

    uploadSectionFile(params) {
      const file = params.file;
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.handleAvatarRemove();
        this.$message.error("上传图片只能为jpg或png格式");
        return;
      }
      if (!isLt2M) {
        this.handleAvatarRemove();
        this.$message.error("上传LOGO图片大小不能超过 2MB!");
        return;
      }
      const form = new FormData();
      form.append("logo", file);
      this.handleAvatarRemove(); //移除默认不调用上传接口就回显的图片
      this.loading = true;
      hospitalLogo(form).then((response) => {
        this.loading = false;
        this.form.hospitalLogo = response.imgUrl;
        //上传成功后图片回显
        this.imageUrlList = [];
        this.imageUrlList.push({
          name: logoUrl,
          url: logoUrl,
        });
        //上传完成，隐藏上传按钮
        this.setUploadBtn();
      });
    },
    // 展示/隐藏上传按钮
    setUploadBtn() {
      this.hideUpload = this.imageUrlList.length >= this.limitCount;
    },
    handleAvatarRemove(file, fileList) {
      this.imageUrlList = [];
      this.form.logo= undefined;
      this.clearFile();
    },
    clearFile() {
      this.$refs.upload.clearFiles();
      this.setUploadBtn();
    },

style：去掉scoped

<style>
.hide .el-upload--picture-card {
  display: none;
}
</style>

总结：还有很多细节前端开发者们可以自己完善