Angular 19中本地图片转File后显示为空的问题求助

问题概述 #

在Angular 19项目中，尝试将assets目录下的本地图片（通过相对URL获取）转为File对象，再用FileReader生成DataURL显示到DOM，结果图片空白，还触发Uncaught InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.错误。

原代码片段 #

第一段代码

function selectImagesToUpload() {
  const input = document.getElementById("product_pics");
  const preview = document.querySelector(".preview");
  const images = preview.querySelectorAll("div.preview > p");

  images.forEach(async item => {

    let fn = item.innerText.split(';')[0];
    let ext = fn.slice(fn.lastIndexOf('.') + 1, fn.length);

    let p = await fetch(fn).then(response => response.blob());
    let b = await p.arrayBuffer();
    let f0 = new File(new Uint8Array(b), fn, { type: `image/${ext}` });

    var reader = new FileReader();
    reader.onload = function (e) {
      var image = document.createElement("img");
      image.src = e.target.result;
      document.body.appendChild(image);
    }
    reader.readAsDataURL(f0);

  });
}

示例图片路径格式：<p>img/prodotto7.jpg;</p>

第二段排查代码

let fn = item.innerText.split(';')[0];
let ext = fn.slice(fn.lastIndexOf('.') + 1, fn.length);
let p = await fetch(fn).then(response => response.blob());
let b = await p.arrayBuffer();
let ua = new Uint8Array(b)
let u64 = ua.toBase64;
let f0 = new File( ua , fn, { type: `image/${ext}` });
console.log(f0);
const para = document.createElement("p");
para.textContent = item.textContent;
preview.appendChild(para);

var reader = new FileReader()

reader.onload = function (e) {
  var image = document.createElement("img");
  image.src = e.target.result;
  console.log(image.src);
  var bs = atob(e.target.result);
  var buffer = new ArrayBuffer(bs.length);
  var ba = new Uint8Array(buffer);
  for (var i = 0; i < bs.length; i++) {
    ba[i] = bs.charCodeAt(i);
  }

  var blob = new Blob([ba], { type: "image/jpg" });
  document.body.appendChild(URL.createObjectURL(blob));
}
reader.readAsDataURL(f0);

错误原因分析 #

1. atob编码错误：FileReader.readAsDataURL()返回的是完整的DataURL（格式为data:image/jpeg;base64,xxxxxx），直接用atob()解码会包含前缀部分，这部分不是Base64编码内容，导致解码失败。
2. 图片路径错误：Angular中assets目录的资源需要以assets/开头请求，直接用img/prodotto7.jpg会导致404，fetch到空Blob，最终生成空白图片。
3. 冗余数据转换：从Blob转ArrayBuffer再转Uint8Array创建File是多余操作，中间步骤可能导致数据损坏。
4. MIME类型错误：手动拼接image/${ext}可能不准确（比如jpg对应的MIME类型是image/jpeg），导致图片无法正确解析。

修复方案 #

方案1：直接用Blob生成预览（无需转File） #

如果只是需要预览图片，完全不需要转File对象，直接用URL.createObjectURL()更高效：

async function selectImagesToUpload() {
  const preview = document.querySelector(".preview");
  const images = preview.querySelectorAll("div.preview > p");

  // 用for...of替代forEach，避免async回调的异步问题
  for (const item of images) {
    // 提取路径并去除多余空格
    let fn = item.innerText.split(';')[0].trim();
    // 补全Angular assets路径前缀
    const fullPath = `assets/${fn}`;

    try {
      const response = await fetch(fullPath);
      // 检查请求是否成功
      if (!response.ok) throw new Error(`图片请求失败，状态码：${response.status}`);

      const blob = await response.blob();
      // 直接生成预览URL
      const previewUrl = URL.createObjectURL(blob);

      const image = document.createElement("img");
      image.src = previewUrl;
      image.style.maxWidth = "200px"; // 增加样式方便查看
      document.body.appendChild(image);
    } catch (err) {
      console.error("处理图片出错：", err);
    }
  }
}

方案2：正确转换为File对象后处理 #

如果确实需要File对象，优化转换流程：

async function selectImagesToUpload() {
  const preview = document.querySelector(".preview");
  const images = preview.querySelectorAll("div.preview > p");

  for (const item of images) {
    let fn = item.innerText.split(';')[0].trim();
    const fullPath = `assets/${fn}`;
    // 提取纯文件名（去掉路径部分）
    const fileName = fn.split("/").pop();
    const ext = fileName.split(".").pop().toLowerCase();

    try {
      const response = await fetch(fullPath);
      if (!response.ok) throw new Error(`图片请求失败，状态码：${response.status}`);

      const blob = await response.blob();
      // 直接从Blob创建File，使用Blob自带的MIME类型
      const file = new File([blob], fileName, { type: blob.type });

      const reader = new FileReader();
      reader.onload = function (e) {
        const image = document.createElement("img");
        image.src = e.target.result;
        image.style.maxWidth = "200px";
        document.body.appendChild(image);

        // 如果需要用atob解码，必须先去掉DataURL前缀
        if (e.target.result.includes(',')) {
          const base64Str = e.target.result.split(',')[1];
          const decodedStr = atob(base64Str);
          // 后续处理逻辑...
        }
      };
      reader.readAsDataURL(file);
    } catch (err) {
      console.error("处理图片出错：", err);
    }
  }
}

关键修复点 #

• 补全assets路径：Angular项目中必须以assets/开头请求目录内的资源，否则会找不到文件。
• 替换forEach为for...of：forEach中的async回调不会等待异步操作完成，for...of可以保证顺序处理并正确捕获错误。
• 避免冗余转换：直接从Blob创建File，跳过ArrayBuffer和Uint8Array的转换，减少出错概率。
• 正确处理DataURL：使用atob前必须提取data:xxx;base64,之后的纯Base64字符串。
• 使用Blob自带MIME类型：避免手动拼接类型错误，Blob的type属性是服务器返回的正确类型。

内容的提问来源于stack exchange，提问作者Stefano Giammori