图片预览代码报错：Uncaught TypeError: Cannot read property 'setSrc' of undefined求助

Hey there, let's break down this error and get your image preview working again! That TypeError means the object you're trying to call setSrc() on is undefined—so we need to figure out why that's happening and fix it. Here are the most common causes and solutions:

1. The this Context Got Mismatched in the Callback #

When you're using a FileReader's onload callback, the default this inside that function doesn't point to your component/object (where setSrc is defined). This is a super common gotcha with JavaScript callbacks.

Fixes: #

• Use an arrow function (they inherit the outer this context):

  const reader = new FileReader();
  reader.onload = (e) => {
    // Now `this` refers to your original object with setSrc
    this.setSrc(e.target.result);
  };
  reader.readAsDataURL(file);
  

• Or capture the correct this beforehand:

  const self = this; // Save the right context outside the callback
  const reader = new FileReader();
  reader.onload = function(e) {
    self.setSrc(e.target.result);
  };
  reader.readAsDataURL(file);
  

2. The Object with setSrc Isn't Properly Initialized #

Maybe the object that should have the setSrc method hasn't been created yet, or got reset to undefined before the callback runs.

Fixes: #

• Add a safety check before calling setSrc to avoid the error and debug:

  reader.onload = (e) => {
    if (this && typeof this.setSrc === 'function') {
      this.setSrc(e.target.result);
    } else {
      console.log('Warning: setSrc is unavailable', this);
    }
  };
  

• Double-check initialization timing: Make sure you're not trying to use the object before it's been set up (e.g., running code before the DOM is ready, or before your component is mounted).

3. setSrc Is Misdefined or Out of Scope #

It's possible setSrc isn't actually attached to the object you're trying to call it on—maybe a typo, or it's defined in a different scope.

Fixes: #

• Debug with console logs: Print the object and check if setSrc exists:

  console.log('Current object:', this);
  console.log('Does setSrc exist?', typeof this.setSrc === 'function');
  

• Verify the method's definition: Check that setSrc is spelled correctly (case matters!) and that it's part of the object you're referencing. For example, if it's a class method, make sure you're not missing this when defining it, or that you're instantiating the class properly.

Example Working Code #

Here's a quick example of how this should all come together for an image preview:

class ImagePreviewHandler {
  constructor(previewImgId) {
    this.previewImg = document.getElementById(previewImgId);
  }

  setSrc(src) {
    this.previewImg.src = src;
  }

  handleFileSelect(event) {
    const selectedFile = event.target.files[0];
    if (!selectedFile) return;

    const reader = new FileReader();
    reader.onload = (e) => {
      this.setSrc(e.target.result);
    };
    reader.readAsDataURL(selectedFile);
  }
}

// Initialize and attach event listener
const previewHandler = new ImagePreviewHandler('preview-image');
document.getElementById('image-upload').addEventListener('change', (e) => {
  previewHandler.handleFileSelect(e);
});

Pro Tip #

Use your browser's dev tools! Set a breakpoint at line 405 of FdatosTrabajador.js—when the code hits that line, you can inspect the value of the object you're trying to call setSrc on. This will tell you exactly why it's undefined.

内容的提问来源于stack exchange，提问作者Victor Velasco