javascript - React、Redux、Filepond
问题描述
我的问题......我如何使用 FilePond 但 onclick 上传文件,而不是像开箱即用那样自动上传文件?此外,由于我需要对这些图像采取一些其他操作(例如在上传之前显示它们以供查看),并且因为我需要将其他数据添加到要发送的 FormData 中(以及向 Redux 发送操作)。
通常我会创建一个 FormObject 将文件和其他值附加到它,然后再将其发布到某个端点(需要任何自定义标头)。但是,当我检查 FilePond 实例时,似乎我唯一可以访问的是 blob ......而不是实际文件。这是准确的吗?我是否需要遵循一些特殊的 FilePond 特定技术才能使文件上传正常工作?
FilePond 的文档有一个名为“server”的自定义配置值,它似乎可以访问更高级示例中的实际文件,所以这是必须完成的方式吗?我不能只抓取文件(从我目前在 FilePond 实例上看不到的某个地方)并将它们附加到一个对象以在我的正常“服务”中使用吗?
任何提示表示赞赏。在 React 应用程序中,我想在附加其他表单数据和设置标题(理想情况下使用 Axios)之后上传可变数量的文件,并将这些文件发布到 API。
他们文档中的示例使用如下道具:
server="/api"
我想要类似(假代码)的东西:
server={submitImages} <-- this should only happen onclick of some button
在哪里:
submitImages = (fieldName, file) => {
const formData = new FormData()
formData.append(fieldName, file, file.name)
formData.append('foo', this.props.foo)
const docuploadresult = this.props.uploadDocs(formData) <-- a service that lives elsewhere and actually does the POST
docuploadresult.then(result => {
// success
}, error => {
// error
})
}
我的问题是我不明白为什么这需要在一些特殊的配置对象中发生,例如server
,不知道如何在点击时发生这种情况,在任何地方都看不到实际文件。
这可能是我想多了?
解决方案
FilePond 提供该server
属性,因此它可以为您处理上传。但这不是必需的,您可以使用getFiles
它轻松请求File
FilePond 中的所有文件项(和对象)并自己上传。
将您自己的提交按钮添加到表单并使用submitImages
下面的提交文件。
submitImages = (fieldName) => {
const formData = new FormData();
this.filepondRef.getFiles()
.map(fileItem => fileItem.file)
.forEach(file => {
formData.append(fieldName, file, file.name);
});
// upload here
}
如果要显示图像预览,可以添加图像预览插件。 https://pqina.nl/filepond/docs/patterns/plugins/image-preview/
推荐阅读
- r - R的传单不显示形状文件中的多边形
- python - 如何从 SQL 转换“数据框”?
- c++ - for循环倒数到0会更快吗?
- java - 如何在 Java 程序中调用 .Net DLL 中的方法
- database - 如何在 xQuery 中找到元素的平均值?
- dart - 如何按其在飞镖中的值对地图进行排序?
- spring-boot - 如何将 JBPM 设置为 springboot 微服务?
- apache - 了解 HTTP 服务器和 lclient 如何理解请求的媒体类型
- c++ - 无法为 unique_ptr 返回类型返回 nullptr
- css - 如何在jss中编写transition-timing-function?