nodejs文件上传下载
本文分享使用nodejs实现文件上传下载
- 文件上传
主要使用express启动web服务。使用multer处理文件表达数据
代码如下：
var express = require('express'); //引入express
var app = express(); // 创建实例app
var fs = require("fs"); //引入fs，fs 是node中一个文件操作模块，包括文件创建，删除，查询，读取，写入。
var bodyParser = require('body-parser'); // 这个模块是获取post请求传过来的数据。
var multer = require('multer'); //multer - node.js 中间件，用于处理 enctype="multipart/form-data"（设置表单的MIME编码）的表单数据。
app.use('/public', express.static('public')); // 设置静态文件的中间件
app.use(bodyParser.urlencoded({ extended: false })); // 判断请求体是不是json，不是的话把请求体转化为对象
app.use(multer({ dest: '/tmp/'}).array('file'));
//设置允许跨域访问该服务.
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
//Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
res.header('Access-Control-Allow-Headers', '*');
res.header('Access-Control-Allow-Methods', '*');
// res.header('Content-Type','*');
if(req.method === "OPTIONS") res.send(200);/*让options请求快速返回*/
else {
next();
}
});
app.get('/index.htm', function (req, res) {
res.sendFile( __dirname + "/" + "index.htm" );
})
// 上传文件api
app.post('/file_upload', function (req, res) {
console.log(req.files); // 上传的文件信息
const response = {}
for(let i=0;i<req.files.length;i++){
fs.readFile( req.files[i].path, function (err, data) {
let des_file = "./public"+"/" + req.files[i].originalname;//存放路径
fs.writeFile(des_file, data, function (err) {
if( err ){
console.log( err );
}else{
response= {
message:'File uploaded successfully',
filename:req.files[i].originalname
}
}
console.log( data );
console.log(des_file);
res.end( JSON.stringify( response ) );
});
});
}
res.end( JSON.stringify( response ) );
})
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("应用实例，访问地址为 http://%s:%s", host, port)
})
以上就是文件上传下载的服务端代码。为了方便上传。对接口做了允许跨域。这样前端页面代码就不用部署到和服务端代码一个域了。
- 文件下载
文件下载代码如下：
//下载文件接口
app.get('/download',(req,res) => {
res.set({
"Content-Type":"application/octet-stream",//告诉浏览器这是一个二进制文件
"Content-Disposition":"attachment; filename=IMG_0169.JPG"//告诉浏览器这是一个需要下载的文件
});
fs.createReadStream('./public/'+'IMG_0169.JPG').pipe(res);
});
以上文件名可以从接口请求中获取就实现了下载不同的文件。
- 前台代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="file" id="file1" name="file1" />
<input type="file" id="file2" name="file2" />
<input type="button" value="上传" id="upload" />
<input type="button" value="下载" id="download" />
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$("#download").click(function() {
window.open("http://localhost:8081/download");
});
$("#upload").click(function() {
//创建一个FormDate
var formData = new FormData();
//将文件信息追加到其中
formData.append("file", $("#file1")[0].files[0]);
formData.append("file", $("#file2")[0].files[0]);
$.ajax({
url: "http://localhost:8081/file_upload",
method: "post",
//取消帮我们格式化数据，是什么就是什么
processData: false,
//ajax2.0可以不用设置请求头，但是jq帮我们自动设置了，这样的话需要我们自己取消掉
contentType: false,
data: formData,
success: function(res) {
console.log(res);
}
});
});
</script>
</html>