浏览器端JavaScript如何将本地文件/文件夹内容存入变量？

你原来的const beachImage = Images/beach.jpeg写法是语法错误，浏览器环境无法直接通过这种方式读取本地文件内容，必须借助DOM元素或File API来处理，以下是两种常见场景的解决方案：

一、加载项目内的本地图片（已知文件路径） #

如果图片是项目目录里的资源（比如Images/beach.jpeg），可以通过创建HTMLImageElement来加载，等图片加载完成后再传给face-api处理：

// 创建图片元素
const beachImg = new Image();
// 设置图片相对路径，注意路径要和当前HTML文件的位置对应
beachImg.src = './Images/beach.jpeg';

// 等待图片加载完成后执行face-api操作
beachImg.onload = async () => {
  // 示例：调用face-api检测人脸
  const faceDetections = await faceapi.detectAllFaces(beachImg);
  console.log('检测结果:', faceDetections);
};

// 处理图片加载失败的情况
beachImg.onerror = () => {
  console.error('图片加载失败，请检查路径是否正确');
};

二、加载用户选择的本地文件 #

如果需要让用户自己选择本地图片，可以结合<input type="file">和FileReader来实现：

首先添加HTML文件选择框：

<input type="file" id="imagePicker" accept="image/*">

然后编写JavaScript逻辑：

const imagePicker = document.getElementById('imagePicker');

imagePicker.addEventListener('change', async (e) => {
  // 获取用户选择的文件
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  // 创建FileReader读取文件内容
  const reader = new FileReader();
  
  reader.onload = async (event) => {
    const img = new Image();
    // 将读取到的文件DataURL设置为图片源
    img.src = event.target.result;

    img.onload = async () => {
      // 调用face-api处理图片
      const faceDetections = await faceapi.detectAllFaces(img);
      console.log('检测结果:', faceDetections);
    };
  };

  // 以DataURL格式读取文件
  reader.readAsDataURL(selectedFile);
});

关键注意点 #

• 路径正确性：相对路径是相对于当前HTML文件的位置，比如HTML在根目录，图片在根目录下的Images文件夹，就用./Images/beach.jpeg；如果HTML在子文件夹，需调整路径层级（比如../Images/beach.jpeg）。
• 等待加载完成：必须在图片onload回调里执行face-api的方法，否则图片未加载完全会导致检测失败。
• 跨域问题：如果直接用file://协议打开HTML，可能会触发跨域限制，建议用本地服务器（比如http-server）运行项目，避免报错。

内容的提问来源于stack exchange，提问作者Isaac Bell