(vue)el-upload上传功能上传功能及成功后去掉上传框

在这里插入图片描述

在这里插入图片描述


代码

<el-upload
   action=".../uploadPic"
    list-type="picture-card"
    :class="{ hide: hideUpload }" //控制上传框显示隐藏
    :on-preview="handlePictureCardPreview"
    :before-upload="beforeAvatarUpload"
    :file-list="imageUrlList"
    :data="dataObject"
    :on-change="fileChange"
    :auto-upload="false"
    :on-remove="uploadRemove"
    accept="image/jpg, image/jpeg, image/png"
  >
    <i class="el-icon-plus"></i>
  </el-upload>


data(){
	return {	
		hideUpload: false, // 控制上传按钮显示隐藏
		...
	}
}


methods:{	
    handlePictureCardPreview(file) {
      this.dialogVisibleImg = true;
      this.form.img = file.url;
    },
    beforeAvatarUpload(file) {
      let a = "image/jpg,image/jpeg,image/png";
      const isJPG = a.indexOf(file.type) > -1;
      const isLt2M = file.size / 1024 / 1024 < 500;
      if (!isJPG) {
        this.$Message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$Message.error("上传头像图片大小不能超过 500KB!");
      }
      return isJPG && isLt2M;
    },
    //把图片转成base64编码
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
    //调用上面base64方法 将文件信息传过去
    fileChange(file, fileList) {
      this.hideUpload = true;
      let that = this;
      that.getBase64(file.raw).then((res) => {
        that.form.img = res;
        that.dataObject.img = res; //赋值
        that.formEdit.img = res;
        getKnowledgeUpload(that.dataObject).then((res) => {
          console.log(res);
          if (res.status == 200) {
            this.$Message.success("图片上传成功");
            this.hideUploadEdit = true;
          } else {
            this.hideUpload = false;
          }
        });
      });
    },
}
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐