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>

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值