基于express 的文件上传功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上传文件</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<img id="img" src="" alt="" width="300px"><br>
<input type="file" name="imgs" value="" id="file"><br>
<input type="submit" value="上传文件"><br>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$("#file").change(function(event){
let file = event.target.files[0] || event.dataTransfer.files[0];
console.log(file);
if(file){
let reader = new FileReader();
reader.onload = function(){
$("#img").attr("src",this.result);
}
reader.readAsDataURL(file);
}
});
})
</script>
</body>
</html>
const express = require("express");
const app = new express();
const multer = require("multer");
const fs = require("fs");
app.use(express.json());
app.use(express.urlencoded({extended:false}));
//array中的名称要和表单中的名称一致
app.use(multer({dest:"/"}).array("imgs"));
app.get("/",(request,response)=>{
response.sendFile(__dirname + "/index.html");
});
app.post("/upload",(request,response)=>{
if(request.files.length !== 0){
let sava_path = __dirname + "/images/" + request.files[0].originalname;
console.log(sava_path);
let file_body = fs.readFileSync(request.files[0].path);
fs.writeFile(sava_path,file_body,(err,data)=>{
if(err) response.send(err);
let response_body = {
msg : `${request.files[0].originalname} upload success` ,
}
response.json(response_body);
});
}
});
app.listen(80);