如何正确获取上传图片的base64字符串存入元素避免传输图片损坏

• 文件读取方法调用错误：原代码使用fr.readAsText(file)读取图片二进制文件，浏览器会按文本编码规则解析二进制流，直接破坏原始数据，输出内容不是合法的base64字符串。针对需要生成base64编码的场景，必须使用FileReader的readAsDataURL方法，该方法会自动将二进制文件转成符合标准的base64 DataURL格式，不会破坏原始文件内容。
• 段落元素赋值方式错误：<p>是文本块级元素，本身不存在value属性，原代码给p元素的value属性赋值，本质是给元素挂载了无实际意义的自定义字段，Java后端读取<p>元素的真实文本内容时，完全获取不到这段base64字符串，自然会出现数据损坏、内容为空的问题。块级文本元素的内容必须通过textContent属性写入真实文本节点，才能被后续逻辑正常读取。
• 老旧接口兼容提醒：如果对接的老API不支持base64字符串自带的data:image/[格式];base64,前缀，需要在写入文本节点时主动截取前缀后的纯base64内容，避免老接口解析时把前缀当普通编码内容处理，导致解码失败。

HTML结构（保留原有元素，适配后端读取规则） #

<input type="file" name="attachment" id="attachment" accept="image/*" onchange='onChooseFile(event, onFileLoad.bind(this, "imageData"))'>
<p id="imageData"></p>

JavaScript逻辑 #

function onFileLoad(elementId, event) {
  // 写入p元素的真实文本节点，可被后端正常读取
  document.getElementById(elementId).textContent = event.target.result;
  // 若老API需要去掉base64前缀，替换为以下逻辑即可：
  // const pureBase64 = event.target.result.split(',')[1]
  // document.getElementById(elementId).textContent = pureBase64
}

function onChooseFile(event, onLoadFileHandler) {
  if (typeof window.FileReader !== 'function')
    throw ("当前浏览器不支持File API");
  let input = event.target;
  if (!input)
    throw ("浏览器未正确实现事件对象");
  if (!input.files)
    throw ("当前浏览器不支持文件输入的files属性");
  if (!input.files[0])
    return undefined;
  let file = input.files[0];
  let fr = new FileReader();
  fr.onload = onLoadFileHandler;
  // 替换原readAsText为readAsDataURL，保证输出合法base64编码
  fr.readAsDataURL(file);
}

验证方法：代码部署后，在浏览器控制台执行document.getElementById('imageData').textContent，检查输出内容是否为合法base64字符串（格式为data:image/xxx;base64,xxxxx，长度和图片大小匹配），确认输出正常后，后端读取到的内容就不会出现损坏问题。

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