3

我的 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 的方法，但是我在文件对象上看不到具有原始数据的属性。

有没有办法访问它，或者有人有更好的选择吗？

这是对象上可用属性的示例

4

2 回答 2

2

试试filepond 的File encode 插件，它正是你需要的：

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

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

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

注册插件： 

registerPlugin(FilePondPluginFileEncode);

更多细节在这里

于 2019-01-25T16:01:36.713 回答
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
}
于 2021-05-20T13:28:04.930 回答