如何将 JavaScript Blob 上传到 JSF 而不将其转换为 Base64 字符串？

Question

我在 JS 中将音频录制为 blob。如何上传它而不将其转换为 Base64 字符串并通过

<p:remoteCommand>

或

<h:commandScript>

发送？

Answer 1

使用被CSS隐藏的

<h:inputFile>

，并让

<h:commandScript>

（或

<p:remoteCommand>

，无论你的偏好是什么）也处理/执行它。

<h:form id="hiddenUploadForm" enctype="multipart/form-data" styleClass="ui-helper-hidden">
    <h:inputFile id="file" value="#{bean.uploadedFile}" />
    <h:commandScript name="hiddenUpload" action="#{bean.upload}" execute="@form" />
</h:form>

^（注意：

ui-helper-hidden

类是PrimeFaces的一部分）

在 bean 中，只需将上传的文件绑定到

Part

属性即可。

private Part uploadedFile; // +getter+setter

public void upload() throws IOException {
    byte[] blob = uploadedFile.getInputStream().readAllBytes();
    // ...
}

您可以在 JS 中使用

DataTransfer

API 来设置

<input type="file">

与

Blob

的值。假设您的音频 blob 由 yourAudioBlob

 类型的 

Blob 变量表示，下面是一个示例：

const fileName = "yourFileName.mp3";
const fileOptions = { type: "audio/mpeg", lastModified: new Date().getTime() };
const file = new File([ yourAudioBlob ], fileName, fileOptions);
const dataTransfer = new DataTransfer(); 
dataTransfer.items.add(file);
document.getElementById("hiddenUploadForm:file").files = dataTransfer.files;
hiddenUpload();