Javascript 没有使用FileJS的上载按钮

你好

我想将FilePond与Reactjs一起使用，以便于将图像上载到服务器。我想让文件填充到Pond中，如描述所示，然后显示上载按钮，供用户上载文件

最初，通过使用他们的演示代码，我注意到它会自动上传文件，通过阅读文档，我看到我在服务器中使用“instantUpload={false}”禁用了自动上传功能。然而，我已经这样做了，我仍然没有一个上传按钮供用户使用。我读了更多的文档，他们说我需要指定我拥有的服务器。我的代码中是否缺少显示上载按钮的内容

下面的代码：

import React, { Component } from "react";
/*import agent from "superagent";*/
import classNames from "classnames";
import cookie from 'react-cookies';

// Import React FilePond
import { FilePond, registerPlugin } from "react-filepond";

// Import FilePond styles
import "filepond/dist/filepond.min.css";

// Import the Image EXIF Orientation and Image Preview plugins
// Note: These need to be installed separately
import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";

// Register the plugins
registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);


export default class FotoUpload extends Component {
  constructor(props) {
   super(props);

   this.state = {
     // Set initial files, type 'local' means this is a file
     // that has already been uploaded to the server (see docs)
     files: [
       {
         source: "index.html",
         options: {
           type: "local"
         }
       }
     ]
   };
 }

 handleInit() {
   console.log("FilePond instance has initialised", this.pond);
 }

 render() {
   return (
     <div className="App">
       {/* Pass FilePond properties as attributes */}
       <FilePond
       ref={ref => (this.pond = ref)}
                  allowFilePoster={true}
                  instantUpload={false}
                  server=
                      {
                        {
                          url: 'http://mybackend.com:5000/upload/images',
                          process: {
                          headers: {
                                'cookie-token':  cookie.load('cookie')
                                  },
                            }
                          }
                        }
                  name="image"
                  acceptedFileTypes={['image/*']}
                  oninit={() => this.handleInit()}
         onupdatefiles={fileItems => {
           // Set currently active file objects to this.state
           this.setState({
             files: fileItems.map(fileItem => fileItem.file)
           });
         }}
       />
     </div>
   );
 }
}

import React，{Component}来自“React”；
/*“超级代理”的进口代理*/
从“类名”中导入类名；
从“react cookies”导入cookie；
//导入文件池
从“react FilePond”导入{FilePond，registerPlugin}；
//导入文件池样式
导入“filepond/dist/filepond.min.css”；
//导入图像EXIF方向和图像预览插件
//注意：这些需要单独安装
从“文件池插件图像exif方向”导入文件池插件图像exif方向；
从“filepond插件图像预览”导入FilePondPluginImagePreview；
导入“filepond插件图像预览/dist/filepond插件图像预览.css”；
//注册插件
registerPlugin（FilePondPluginImageExiForOrientation，FilePondPluginImagePreview）；
导出默认类FotoUpload扩展组件{
建造师（道具）{
超级（道具）；
此.state={
//设置初始文件，键入“local”表示这是一个文件
//已上载到服务器的（请参阅文档）
档案：[
{
来源：“index.html”，
选项：{
类型：“本地”
}
}
]
};
}
handleInit（）{
log（“FilePond实例已初始化”，this.pond）；
}
render（）{
返回(
{/*将FilePond属性作为属性传递*/}
（this.pond=ref）}
allowFilePoster={true}
instantUpload={false}
服务器=
{
{
网址：'http://mybackend.com:5000/upload/images',
过程：{
标题：{
“cookie令牌”：cookie.load（'cookie'）
},
}
}
}
name=“image”
acceptedFileTypes={['image/*']}
oninit={（）=>this.handleInit（）}
onUpdate文件={fileItems=>{
//将当前活动的文件对象设置为this.state
这是我的国家({
文件：fileItems.map（fileItem=>fileItem.file）
});
}}
/>
);
}
}

如果我允许instaupload功能，文件将上载并返回成功，但我仍然不会收到上载按钮

Myimage

正如您所见，没有一个上传按钮，如官方文档所示。

类似问题

文件池文档

正式回购

---

如果将

服务器设置为
，会发生什么情况http://mybackend.com:5000/upload/images“
事实证明，这段代码运行良好。问题是filepond在后台有很多事情要做，我的代码正在修改，必须深入挖掘。当这段代码在沙箱中运行时，我意识到了这一点。所以我删除了一个组件，一切正常。如果将
server
设置为
，会发生什么http://mybackend.com:5000/upload/images“
事实证明，这段代码运行良好。问题是filepond在后台有很多事情要做，我的代码正在修改，必须深入挖掘。当这段代码在沙箱中运行时，我意识到了这一点。所以我移除了一个组件，一切都正常了。