vue设置默认头像

最新推荐文章于 2024-05-20 17:06:13 发布

乐容

最新推荐文章于 2024-05-20 17:06:13 发布

阅读量417

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_61265297/article/details/127645919

版权

          <el-upload
            v-show="!isVoice"
            class="avatar-uploader"
            action="serverApi/file/userAvatar/"
            accept="image/png,.jpg"
            
            :on-exceed="masterFileMax" // 文件超出个数限制时的钩子
            :show-file-list="false" //是否显示已上传文件列表
            :http-request="uploadAvatar" // 覆盖默认的上传行为，可以自定义上传的实现
            :on-success="handleAvatarSuccess" // 文件上传成功时的钩子
            :before-upload="beforeAvatarUpload" // 上传文件之前的钩子，参数为上传的文件
          >
            <el-avatar
              icon="el-icon-user-solid"
              :size="80"
              :src="headIMG(form.avatar)"
            ></el-avatar>
     
          </el-upload>

methode:{

    masterFileMax(files, fileList) {
      this.$message.warning("请最多上传一张图片。");
    },

    uploadAvatar(param) {
      var fileObj = param.file;
      var form = new FormData();
      // 文件对象
      form.append("file", fileObj);
      ossImg(form).then((res) => {
        if ((res.code = 200)) {
          // 弹出提示信息
          this.$message.success("上传图片成功");
          this.form.avatar = res.data.url;
        } else {
          // 执行失败
          this.$message.error(res.msg);
        }
      });
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },

    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" ||
        file.type === 'image/png' ||
        file.type === 'image/jpg';
      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!isJPG) {
        this.$message.error("上传图片只能是jpg、png、jpeg格!");
      }
      if (!isLt5M) {
        this.$message.error("上传头像图片大小不能超过5MB!");
      }
      return isJPG && isLt5M;
    },
     // 上传图片的方法
     headIMG(img) {
      const imgData = require("../../../assets/images/login.jpg");
      return img ? img : imgData;
    },
    // 提交的时候
     if (this.form.avatar) {
         } else {
            this.form.avatar = require("../../../assets/images/login.jpg");
          }
}