从 filepond 对象实例获取数据

Question

我在我的 React 项目中有一个提交表单，我在其中使用文件池 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

试试 File encode plugin for filepond，它正是您需要的：

... it encodes a dropped file as a base64 string and stores the string in a hidden input field as a JSON string. It uses a JSON string so it can also add the file size, type, name and metadata.

用法（反应）：
导入插件代码：

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

注册插件：

registerPlugin(FilePondPluginFileEncode);

更多详情here

Answer 2

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

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

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

A FilePond File is not the same a JavaScript File or Blob. The FilePond File is a wrapper around a JavaScript file object. FilePond docs

但是，您可以使用 file 属性来获取 blob 文件，

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

从 filepond 对象实例获取数据

Get data from filepond object instance

javascript

file

reactjs

filepond