从客户端(jQuery,AJAX)中选择多个文件并发送到服务器(Express)



当客户端单击上传文件时,我想获取多个文件并在单击上传按钮时上传到服务器。在这里,我正在使用带有 multer 的快速服务器。 我尝试使用单个文件选择和上传,它工作正常。但是我无法找到多个文件上传。

这是代码:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Upload File</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Upload File</h1>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="uploadFile" id="uploadFile">
<input type="submit" value="upload">
</form>
</div>
<script src="./main/script/main.js"></script>
</body>
</html>
// main.js
$(document).ready(function() {
$("#uploadForm").submit(function() {
var data = new FormData($('#uploadForm')[0]);
$.ajax({
url: '/upload',
type: 'POST',
contentType: false,
processData: false,
cache: false,
data: data,
success: function(res) {
alert(res);
},
error: function() {
alert('Error: In sending the request!');
}
})
});
});
// uploadfile.js
const path = require("path");
const multer = require("multer");
const fs = require('fs');
const mkdirp = require("mkdirp");
//set Storage Engine
const storage = multer.diskStorage({
destination: path.join(__dirname, '../../public/storage/'),
filename: function(req, file, cb) {
cb(null, file.originalname);
}
})
const upload = multer({
storage: storage,
limits: {
fileSize: 1000000 //give no. of bytes
},
// fileFilter: function(req, file, cb){
//     checkFileType(file, cb);
// }
}).single('uploadFile');
// function checkFileType(file, cb){
//     console.log(file);
//     // // Allowed extensions
//     // const filetypes = /xlsx|xlx|csv/;
//     // //check ext
//     // var extname = filetypes.test(path.extname(file.originalname).toLocaleLowerCase());
//     // var mimetype = filetypes.test(file.mimetype);
//     // if(extname  mimetype){
//     //     return cb(null, true);
//     // }else{
//     //     return cb('Error: Invalid file types!');
//     // }
// }
function uploadFile(req, res) {
upload(req, res, (err) => {
if (err) {
//Send error msg
console.log(err);
res.send(err);
} else {
//send correct msg
//res.send()
res.send('Successful');
console.log('file uploaded succcessfully');
}
});
}
module.exports = {
uploadFile
}

您需要更改 multer 函数并从single更改为array

var upload = multer({ 
storage : storage 
limits: {
fileSize: 1000000 //give no. of bytes
},
}).array('uploadFile');

最新更新