Javascript ReactJS+;SocketIOFileUpload,如何将这两个文件集成在一起以将文件上载到服务器?
我正在开发一个应用程序,我需要使用socket.io将文件上载到服务器,我决定使用sockerioFileUpload来完成这项工作。我最大的问题是我不知道如何将这两件事结合起来。这就是我到目前为止所做的: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 "../../..
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);
});