Javascript ReactJS+;SocketIOFileUpload,如何将这两个文件集成在一起以将文件上载到服务器?

Javascript ReactJS+;SocketIOFileUpload,如何将这两个文件集成在一起以将文件上载到服务器?,javascript,node.js,reactjs,file-upload,socket.io,Javascript,Node.js,Reactjs,File Upload,Socket.io,我正在开发一个应用程序,我需要使用socket.io将文件上载到服务器,我决定使用sockerioFileUpload来完成这项工作。我最大的问题是我不知道如何将这两件事结合起来。这就是我到目前为止所做的: import React, { Component } from "react"; import socket from "./sockets/socket"; import SocketIOFileUpload from "../../..

我正在开发一个应用程序,我需要使用socket.io将文件上载到服务器,我决定使用sockerioFileUpload来完成这项工作。我最大的问题是我不知道如何将这两件事结合起来。这就是我到目前为止所做的:

import React, { Component } from "react";
import socket from "./sockets/socket";
import SocketIOFileUpload from "../../../node_modules/socketio-file-upload";

class CreateList extends Component {
    constructor(props) {
        super(props);
        this.fileUploader = React.createRef();
        this.submitForm = React.createRef();
        this.state = {};
    }
    render() {
        return (
            <React.Fragment>
                <h1>Create Listing: </h1>
                <div id="listing-inputs" className="inputer-field">
                    <div className="col s6 m8 l8 xl8">
                        <input id="input-listing-email" placeholder=" E-Mail" />
                    </div>{" "}
                    <div className="col s12">
                        <div className="input-field">
                            <p for="input-listing-img" className="">
                                Add Images:{" "}
                            </p>
                            <input ref={this.fileUploader} type="file" accept=".jpeg, .png, .jpg" className="inline" id="input-listing-img" multiple />
                        </div>
                    </div>
                    <div className="col s12">
                        <button ref={this.submitForm} id="input-listing-submit" className="btn right" type="submit" onClick={() => this.handleForm()}>
                            Submit
                        </button>
                    </div>
                </div>
            </React.Fragment>
        );
    }
    
    handleForm = () => {
        console.log("handled!");
        const siofu = new SocketIOFileUpload(socket);
        siofu.listenOnSubmit(this.submitForm, this.fileUploader);

    };
}

export default CreateList;

看起来一切正常,但文件没有上传,我是不是遗漏了什么

const express = require("express");
const siofu = require("socketio-file-upload");
const app = express().use(siofu.router);
const http = require("http").Server(app);
const path = require("path");
const io = require("socket.io")(http);
var PORT = 7777;

app.use(express.static(path.join(__dirname, "client/build/")));
app.get("/", (req, res) => {
    res.sendFile(path.join(__dirname, "client/public", "index.html"));
});
io.on("connection", function (socket) {
    var uploader = new siofu();
    uploader.dir = "./images";
    uploader.listen(socket);
    uploader.on("saved", function (e) {
        console.log("file uploaded!", e.file);
    });
    uploader.on("error", function (e) {
        console.log("Error from uploader", e);
    });
});
http.listen(PORT, () => {
    console.log("Server started on port: " + PORT);
});