Image object can only be logged to the console

问题

I am trying to store the image object in a constructor variable but it comes up undefined, at the moment I can only log the object to the result.

I am trying to get the object data from the class method getUserImage(); but when I try storing the object in this._userImage it shows undefined. Again, only console.log(result) only works :(

Error: TypeError: Cannot read property '_userImage' of undefined
    at /home/jd/Projects/game-site/app/Http/Helpers/ImageUploader.js:23:11
    at IncomingMessage.<anonymous> (/home/jd/Projects/game-site/node_modules/cloudinary/lib/uploader.js:499:51)
    at emitNone (events.js:91:20)
    at IncomingMessage.emit (events.js:188:7)
    at endReadableNT (_stream_readable.js:974:12)
    at _combinedTickCallback (internal/process/next_tick.js:80:11)
    at process._tickCallback (internal/process/next_tick.js:104:9)
[nodemon] app crashed - waiting for file changes before starting...

ImageUploader.js

'use strict';

const cloudinary = require('cloudinary');

class ImageUploader {

  constructor(imageObj) {
    this.imageObj = imageObj;
    this._apiKey = "key";
    this._apiSecret = "secret";
    this._url = `url here`;
    this._userImage = {}; // this is the empty object I try storing the image data into from Cloudinary
    this.config = cloudinary.config({
      cloud_name: 'cloud name here',
      api_key: this._apiKey,
      api_secret: this._apiSecret
    });
  }


  * uploadAvatar(path) {
    cloudinary.uploader.upload(path, function(result) {
      this._userImage.imgData = result;
      return console.log(this._userImage);
    });
  }

  getUserImage() {
    return this._userImage;
  }


}

module.exports = ImageUploader;

UsersController.js

'use strict'

const Validator = require("../Helpers/ValidatorHelper.js");
const ImageUploader = require("../Helpers/ImageUploader.js");

class UsersController {

  * registerView (request, response) {
    yield response.sendView('users.register');
  }

  * register (request, response) {
    const user = request.only('display_name', 'username', 'email', 'password', 'confirm_password', 'console');
    const avatar = request.file('avatar');


    let validator = new Validator(user, avatar);
    let imageUpload = new ImageUploader(avatar);

    let avatarStatus = yield validator.validateAvatar();
    if (avatarStatus) { // is true
      yield imageUpload.uploadAvatar(avatar.file.path);
      console.log(imageUpload.getUserImage());
    } else { // is false
      // pick a random avatar
    }

    return response.status(200).json(user);

  }


}

module.exports = UsersController

回答1:

Your callback is changing the scope this refers to:

* uploadAvatar(path) {
    cloudinary.uploader.upload(path, function(result) {
      // "this" is now referring to your callback function
      this._userImage.imgData = result;
      return console.log(this._userImage);
    });
  }

Preferably, you can fix this by using an arrow function (which retains the parent scope):

 * uploadAvatar(path) {
    cloudinary.uploader.upload(path, (result) => {
      this._userImage.imgData = result;
      return console.log(this._userImage);
    });
  }

Or by capturing this prior to entering your callback:

 * uploadAvatar(path) {
    const _this = this;
    cloudinary.uploader.upload(path, function(result) {
      _this._userImage.imgData = result;
      return console.log(_this._userImage);
    });
  }

来源：https://stackoverflow.com/questions/43081781/image-object-can-only-be-logged-to-the-console

标签

javascript

ecmascript-6

cloudinary