1. 程式人生 > >elementUI怎麼用上傳頭像元件upload

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;
    },