JS将文件转为byte[]对接Java后端REST服务上传下载解析异常求解

Java端常用的JSON序列化框架（如Jackson）默认会对byte[]类型做特殊处理：

• 序列化返回前端时，自动将二进制字节数组编码为Base64字符串
• 反序列化接收前端参数时，要求传入标准Base64字符串才能正确解析为byte[]

你当前的问题出在上传逻辑：前端直接将Uint8Array类型的二进制内容通过axios提交，axios默认会将Uint8Array序列化为普通数字数组，后端无法正确将数字数组反序列为目标byte[]，导致存储的文件内容本身就是错误的，后续下载自然无法正常解析。

1. 上传侧逻辑修改 #

读取文件后将二进制内容转为Base64字符串再提交，保证后端可以正确反序列化：

function onFileSelected(e) {
  var reader = new FileReader();
  reader.readAsArrayBuffer(e.target.files[0]);
  reader.onloadend = (evt) => {
    if (evt.target.readyState === FileReader.DONE) {
      var arrayBuffer = evt.target.result;
      const uint8Arr = new Uint8Array(arrayBuffer);
      // 转二进制字符串后编码为Base64
      let binaryStr = '';
      uint8Arr.forEach(byte => binaryStr += String.fromCharCode(byte));
      this.file.content = btoa(binaryStr);
    }
  };
}

axios提交逻辑无需额外修改，正常传输JSON结构即可。

2. 下载侧逻辑优化 #

现有下载逻辑中存在两处小问题，优化后适配所有文件类型：

async function download(file) {
  // Base64解码后转回Uint8Array
  const binaryStr = atob(file.content);
  const uint8Arr = new Uint8Array(binaryStr.length);
  for (let i = 0; i < binaryStr.length; i++) {
    uint8Arr[i] = binaryStr.charCodeAt(i);
  }
  // 生成Blob时也可补充指定文件MIME类型（建议Document实体新增字段存储该属性）
  const fileURL = window.URL.createObjectURL(new Blob([uint8Arr]));
  const fileLink = document.createElement("a");
  fileLink.href = fileURL;
  fileLink.setAttribute("download",`${file.name}.${file.type}`);
  document.body.appendChild(fileLink);
  fileLink.click();
  fileLink.remove(); // 补全方法调用括号，修复节点未删除的问题
  window.URL.revokeObjectURL(fileURL);
}

3. 后端无需额外修改 #

你当前看到的B@ae3b74d是byte[]类型默认的toString()输出，属于正常现象，只要JSON序列化框架配置正常（默认就支持Base64和byte[]的互转），无需调整后端代码。

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