Angular中从上传的图片文件获取base64值失败如何解决

你的问题核心是FileReader的onload属于异步回调逻辑，return base64的操作是在回调函数内执行的，外层的encodeImageFileAsURL函数没有同步返回值，所以ts中赋值拿到的结果自然是undefined。
另外额外说明：FileReader.readAsDataURL返回的结果本身就是标准的base64格式data URI，你额外调用btoa转换属于多余操作，反而会导致编码错误。

1. 修改js文件中的encodeImageFileAsURL方法，改为返回Promise支持异步调用 #

function encodeImageFileAsURL() {
  return new Promise((resolve, reject) => {
    const filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length <= 0) {
      return reject("未选中任何文件");
    }
    const fileToLoad = filesSelected[0];
    const fileReader = new FileReader();

    fileReader.onload = function(fileLoadedEvent) {
      const srcData = fileLoadedEvent.target.result;
      // 原有渲染预览图逻辑保留
      const newImage = document.createElement('img');
      newImage.src = srcData;
      document.getElementById("imgTest").innerHTML = newImage.outerHTML;
      console.log("base64 is ", srcData);
      resolve(srcData);
    }

    fileReader.onerror = (error) => reject(error);
    fileReader.readAsDataURL(fileToLoad);
  })
}

2. 修改ts文件中的fileloader方法，异步获取base64结果 #

async fileloader(){
  try {
    this.data = await encodeImageFileAsURL();
    console.log("data", this.data);
    // 此处即可调用对接数据库的API传递base64数据
  } catch (err) {
    console.error("文件读取失败：", err);
  }
}

如果你的后端接口要求传二进制流而不是base64字符串，可以把base64的前缀移除后解码为二进制数组再传递：

// 移除data:image/xxx;base64,前缀
const pureBase64 = this.data.split(',')[1];
// 解码为二进制
const binaryStr = atob(pureBase64);
const byteArray = new Uint8Array(binaryStr.length);
for (let i = 0; i < binaryStr.length; i++) {
  byteArray[i] = binaryStr.charCodeAt(i);
}
// byteArray即可直接传给接口匹配varbinary字段存储要求

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