在ReactJS中上传单个和多个文件

Question

我需要帮助。上传工作良好，没有错误，但它并没有真正上传任何东西。正如你所看到的，我使用了multer..我猜它没有调用数据，因为当我console .log数据时，它没有显示任何东西。我将感谢任何帮助

文件上传器:

import React from 'react';
import {useState} from 'react';
import axios from 'axios';
import { toast} from 'react-toastify';
import ('./Uploader.css');
export const FileUploader = ({onSuccess}) => {
const [files, setFiles] = useState([]);
const onInputChange = (e) => { 
setFiles(e.target.files)
};
const onSubmit = (e) => { 
e.preventDefault();
const data = new FormData();
for(let i = 0; i < files.length; i++) {
data.append('file', files[i]);
}
axios.post('//localhost:4000/filesAPI/upload', data)
.then((response) => {
toast.success('Upload Success');
onSuccess(response.data)
})
.catch((err) => {
toast.error('Upload Error')
})
};

return (
<form method="post" action="#" id="#" onSubmit={onSubmit}>
<div className="form-group files">
<label>Upload Your File </label>
<input type="file" className="form-control" onChange={onInputChange} multiple/>         
</div>
<button>Submit</button>
</form>
)
};

app.js客户端:

import React from 'react';
import { useState } from 'react';
import { ToastContainer} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { Preview } from './component/Preview/Preview';
import { FileUploader } from './component/FileUploader/FileUploader';
import './App.css';
function App() {
const [files, setFiles] = useState([]);
const onSuccess = (savedFiles) => {
setFiles(savedFiles)
};
return (
<div className="App">
<FileUploader onSuccess={onSuccess}/>
<Preview files={files}/>
<ToastContainer/>
</div>
);
}
export default App;

app.js服务器端:

const express = require('express');
const multer = require('multer');
const cors = require('cors');
const dotenv = require('dotenv');
const mongoose = require('mongoose')
require('dotenv').config()
const connectDB = require('./config/connectDB');
connectDB()
mongoose.set('strictQuery', true);

const app = express();
app.use(cors());
app.use(express.static('public'));
app.use('/filesAPI', require('./Routes/FilesRoutes'))
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, "myUploads")
},
filename: (req, file, cb) => {
cb(null, Date.now() + '-' + file.originalname)
}
});
const upload = multer({storage}).array('files');
app.post('/filesAPI/upload', (req, res) => {
upload(req, res, (err) => {
if (err) {
return res.status(500).json(err)
}
else{
return res.status(200).send(req.files)
}})
});
var port = process.env.PORT || '4000'
app.listen(port, err => {
if (err)
throw err
console.log('Server is running on port', port)
})

我在谷歌和YouTube上做了研究，但我没有找到任何东西，请帮助

Answer 1

有一个主要问题在你的for loop在onSubmit的FileUploader.js。您正在使用data.append('file', files[i])，但在服务器端，您使用文件作为multer({storage}).array('files')来获取它。所以你需要做同样的，你可以改变这个data.append("files", files[i])。

除此之外，在调用Axios时，您需要使用完整的URL作为http://localhost:4000/filesAPI/upload。

如果你想了解如何使用multi with react和node js的分步指南，可以使用这个链接。这是一个很好的解释。