使用二进制响应填充输入类型标签答案

【问题标题】：Populating an input type tag with a Binary response使用二进制响应填充输入类型标签
【发布时间】：2021-03-12 14:27:10
【问题描述】：

我有一个 PHP 脚本，其中来自 API 的响应是二进制文件 "resumeBinary" 是响应的键。所以，我所做的就是将它编码为 base64，这样我就可以在我构建的 JSON 响应数据中轻松访问它的键。使用 AJAX 获取响应后，控制台上的响应如下所示：

到目前为止，我所做的是使用 atob() 函数将 resumeBinary 转换为其原来的样子，现在它恢复为原来的二进制文本字符串：

我的问题是，是否可以将文件名和二进制值附加到 HTML 输入文件标签？这是为了符合我客户的要求。

用户将授权给APP，然后APP会获取用户的简历，在收到API的响应后，我会将其附加到输入文件类型以及其他候选人的信息。之后他们可以更改该简历文件，如果他们愿意，或者他们可以提交表单，然后我会将其发布到另一个 API。

【问题讨论】：

我不明白这个问题。为什么要填写<input type="file"/>？这些类型的输入允许用户从他们的设备存储中选择文件，然后将其上传到服务器。您是否尝试从一个 API 向另一个 API 发送内容？
是的，你是对的，在用户代表他们授权 API 后，它会调用 API 来获取其简历，然后作为他们步骤的一部分，我需要将其附加到输入标签以传递和发布它到另一个 API。我会更新我的问题。
@Stanislas，我需要按照我的客户和 API 提供商告诉我的步骤流程进行操作。用户可以根据需要重新上传文件，只是如果他们设法授权应用程序，它将预先填充这些数据。这有可能吗？
我不确定这是否可能（但我不这么认为）。但是，如果数据打算从一个 API 传输到另一个 API（用户看不到或无法与之交互），那么我不明白为什么数据首先会发送到客户端。一个 API 不能调用另一个吗？如果数据必须通过客户端传递，那么我会考虑使用hidden input field。
@Stanislas 是的，我同意你的看法，这是一份工作申请表。候选人可以使用他们现有的 SEEK 个人资料，然后如果他们的个人资料上有 CV 文件或简历 PDF，API 会获取它，然后将其附加到申请表中，但如果他们愿意，也可以更改该文件。

标签： javascript html input binaryfiles

【解决方案1】：

当您收到此文本响应时已经太晚了，二进制数据已损坏，您将无法检索它。
你需要fetch this data as an ArrayBuffer or a Blob。由于您没有说明您是如何提出此请求的，因此我们无法在此为您提供太多帮助。

然后，您将能够将其中任何一个转换为 File 对象，您可以在 DataTransfer 中传递该对象并将生成的 FileList 抓取到输入中，如我的 this answer 中所示。

但是，像这样设置文件仍然是一个 hack，它仍然无法在 Safari 等浏览器中运行，并且永远无法在 IE 中运行。

无论你认为你需要这个做什么，我相信有更好的方法来做同样的事情，例如，如果你的目标是将这些数据发布到你的服务器，那么只需使用 FormData 来发出请求与您的文件输入相同。

const data = new Uint8Array( 128 );
crypto.getRandomValues( data ); // some noisy data

const dT = new DataTransfer();
dT.items.add( new File( [data], "file.ext" ) );
document.querySelector("input").files = dT.files;

const the_form = document.querySelector("form");
const formdata_from_DOM = new FormData( the_form );
new Response( formdata_from_DOM ).text()
  .then( txt => console.log( "from DOM: \n", txt ) );

const formdata_from_JS = new FormData();
formdata_from_JS.append( "the-file", new Blob( [ data ] ), "file.ext" );
new Response( formdata_from_JS ).text()
  .then( txt => console.log( "from JS: \n", txt ) );

<form>
  <input type="file" name="the-file">
</form>

如您所见，两个 Request 的负载是相同的，所以最好使用支持更好的那个。

如果可能的话，直接从您的服务器向 API 发出请求会更好。

【讨论】：