我在我的 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,但我在文件对象上看不到具有原始数据的属性。
有没有办法访问它,或者有人有更好的替代方案我可以使用吗?
最佳答案
尝试 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
关于javascript - 从 filepond 对象实例获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54368351/