从 filepond 对象实例获取数据

Question

我的 React 项目中有一个提交表单，我在其中使用 filepond API，因此用户可以将文件提交到表单

到目前为止，我只是使用从文档中获取的标准 FilePond 组件。

   <FilePond ref={ref => this.pond = ref}
                      allowMultiple={true} 
                      maxFiles={4} 
                      oninit={() => this.handleInit() }
                      onupdatefiles={(fileItems) => {
                          // Set current file objects to this.state
                          this.setState({
                              files: fileItems.map(fileItem => fileItem.file)
                          });
                      }}>

                {/* Update current files  */}
                {this.state.files.map(file => (
                    <File key={file} src={file} origin="local" 
                 />
                ))}

            </FilePond>

我将整个请求发送到 Java 中的后端 REST 服务器，因此我想发送信息类型、数据（base64 编码）和文件扩展名。

我通过在请求中创建对象数组来做到这一点

  result: this.state.files.map(file => ({
            "file": this.findFileTypeHandler(file.name), 
            "data": this.encodeFileHandler(file)
        }))
    }

在我的encodeFileHandler 中，我需要一种将数据转换为base64 的方法，但我在文件对象上看不到具有原始数据的属性。

有没有办法访问它，或者有人有我可以使用的更好的替代方案吗？

Answer 1

尝试使用 filepond 的文件编码插件，它完全满足您的需要：

...它将删除的文件编码为 Base64 字符串，并将该字符串作为 JSON 字符串存储在隐藏的输入字段中。它使用 JSON 字符串，因此还可以添加文件大小、类型、名称和元数据。

用法（React）：
导入插件代码：

import FilePondPluginFileEncode from 'filepond-plugin-file-encode';

注册插件：

registerPlugin(FilePondPluginFileEncode);

更多详情请点击此处

Answer 2

file对于正在寻找从 FilePond 对象中获取 blob 的方法的人来说，这对我有用。我保留了对 FilePond 对象的引用，如下所示：

pond = FilePond.create(
    document.querySelector('#file'), {
        allowMultiple: true,
        instantUpload: false,
        allowProcess: false
    });

然后使用pond.getFiles()方法获取FilePond文件的对象。这与 blob 文件对象不同，

FilePond 文件与 JavaScript 文件或 Blob 不同。FilePond 文件是 JavaScript 文件对象的包装器。FilePond 文档

但是，您可以使用file属性来获取 blob 文件，如下所示：

pondFiles = pond.getFiles();
for (var i = 0; i < pondFiles.length; i++) {
    // todo get file blob with pondFiles[i].file
}