elementUI怎么用上传头像组件upload

 <el-upload
     class="avatar-uploader"
       action="123"
       :http-request="upLoad"
       :show-file-list="false"
       :on-success="handleAvatarSuccess"
       :before-upload="beforeAvatarUpload">
       <img v-if="headUrl" :src="headUrl" class="avatar">
       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
     </el-upload>
 upLoad(file) {
      const formData = new FormData();
      formData.append('file', file.file);
      console.log(file);
      this.$http.uploadHttp('/udb/api/v1/oss/fileUpload', formData).then((res) => {
        console.log(res);
        console.log('上传成功');
        if (res.data.code === 0) {
          this.successUrl = res.data.response; // 请求之后将返回的URL给修改的接口在进行一次修改请求
          this.headUrl = res.data.response; // 请求成功之后赋给头像的URL
          this.$message('头像上传成功');
          this.$store.dispatch('person/setAvatar', this.successUrl);
          const obj = {
            headUrl: this.successUrl
          };
          this.edit(obj);
          // this.getAccount();
        } else {
          this.$message('头像上传失败');
        }
      });
    },
 //  handleSuccess(file) {
      // console.log(file);
      // this.$store.dispatch('person/setAvatar', '头像地址');
    // },
    handleAvatarSuccess(res, file) {
      this.headUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt3M = file.size / 1024 / 1024 < 3;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt3M) {
        this.$message.error('上传头像图片大小不能超过 3MB!');
      }
      return isJPG && isLt3M;
    },

猜你喜欢

转载自blog.csdn.net/jo_an_na/article/details/82908796