javascript - 以十六进制发送 Javascript POST XMLHttpRequest 文件内容

Question

我正在尝试从我的 JS 代码中上传一个静态文件。我有一个要作为 POST 参数发送的 .tgz 文件。我已将我的文件转储到一个十六进制字符串文件数据中，例如:var 文件 = "\xff\x01\x08 .....

我想作为多表单发布数据的正文内容发送。似乎当我尝试 .send(file) 时，十六进制值变得困惑并且文件已损坏。

JS 看起来像这样:

var url = "/index/upload/"

var fileData = '\xF1\x08\x00\x00........\x00\x00';
//whole file binary content in hex) 

boundary = "----------3333338220322",
xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary);
var body = "--" + boundary + "\r\n";
body += 'Content-Disposition: form-data; name="newFile"; filename="filename.tgz"\r\n';
body += "Content-Type: application/x-gzip\r\n\r\n";
body += fileData + "\r\n";
body += "--" + boundary + "--";
xhr.send(body);

不知道哪里出了问题。如果我手动上传文件，请求看起来和我完全一样，但是通过代理观察时二进制数据似乎有所不同。如果我需要将其全部内容包含在 JS 代码本身中，是否有更好的方式来发送文件？

Answer 1

想出等待让它工作的方法。使用 base64 编码文件而不是十六进制。

var b64data = 'H4sIAHegu.....';
const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  const blob = new Blob(byteArrays, {type: contentType});
  return blob;
}

const contentType = 'application/x-gzip';
const blob = b64toBlob(b64data, contentType);

然后用这个blob作为文件内容。

从这里找到的解决方案:

Convert base64 png data to javascript file objects

offsec/awae ;)