FileReader读取文件后为什么总是undefined？

令狐艺嘉提问于 2026-03-20 04:28:19 阅读 3

交互

我在用FileReader读取用户上传的图片，但在onload回调外面拿不到结果，打印出来一直是undefined。明明在回调里console.log能看见数据啊？

我试过把结果赋值给一个变量，但好像因为异步的问题拿不到。代码大概是这样的：

const file = e.target.files[0];
let imgData;
const reader = new FileReader();
reader.onload = function(e) {
  imgData = e.target.result;
};
reader.readAsDataURL(file);
console.log(imgData); // 这里是 undefined

我来解答赞 3 收藏

反馈

1 条解答

南宫明礼 Lv1

异步问题。console.log在onload之前执行了，所以是undefined。把需要用imgData的代码放到onload回调里，或者用Promise包装：

const reader = new FileReader();

reader.onload = function(e) {

  const imgData = e.target.result;

  console.log(imgData); // 这里才能拿到

  // 后续逻辑写这里

};

reader.readAsDataURL(file);

或者Promise版本：

function readFile(file) {

  return new Promise((resolve) => {

    const reader = new FileReader();

    reader.onload = e => resolve(e.target.result);

    reader.readAsDataURL(file);

  });

}



// 用法

const imgData = await readFile(file);

2026-03-20 05:07