javascript - 从 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

尝试 File encode plugin对于 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.

用法( react ):
导入插件代码:

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

注册插件:

registerPlugin(FilePondPluginFileEncode);

更多详情 here