在Express.js中,文件上传是因为它的异步性和联网方式略有困难。
【Express.js文件上传】它可以通过中间件来处理multipart/form数据来完成。有很多的中间件,可以像multer,connect, body-parser等可使用。
在这里让我们举个例子来说明在Node.js的文件上传,我们使用的是中间件“multer”。
创建一个文件夹“JTP文件上传”具有以下文件:
文章图片
上传:它是一个空文件夹即创建用于存储上载的图像。
封装:这是JSON文件,其具有以下数据:
文件:package.json
{
"name": "file_upload","version": "0.0.1","dependencies": {
"express": "4.13.3","multer": "1.1.0"
},"devDependencies": {
"should": "~7.1.0","mocha": "~2.3.3","supertest": "~1.1.0"
}
}
文件:index.html
<
html>
<
head>
<
title>File upload in Node.js by srcmini<
/title>
<
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><
/script>
<
script src="http://img.readke.com/220413/054445O60-2.jpg"><
/script>
<
script>
$(document).ready(function() {
$('#uploadForm').submit(function() {
$("#status").empty().text("File is uploading...");
$(this).ajaxSubmit({error: function(xhr) {
status('Error: ' + xhr.status);
},success: function(response) {
console.log(response)
$("#status").empty().text(response);
}
});
return false;
});
});
<
/script>
<
/head>
<
body>
<
h1>Express.js File Upload: by srcmini<
/h1>
<
form id="uploadForm" enctype="multipart/form-data" action="/uploadsrcmini" method="post">
<
input type="file" name="myfile" /><
br/><
br/>
<
input type="submit" value="http://www.srcmini.com/Upload Image" name="submit"><
br/><
br/>
<
span id="status"><
/span>
<
/form>
<
/body>
<
/html>
文件:server.js
var express = require("express");
var multer = require('multer');
var app = express();
var storage = multer.diskStorage({
destination: function (req,file,callback) {
callback(null,'./uploads');
},filename: function (req,file,callback) {
callback(null,file.originalname);
}
});
var upload = multer({ storage : storage}).single('myfile');
app.get('/',function(req,res){
res.sendFile(__dirname + "/index.html");
});
app.post('/uploadsrcmini',function(req,res){
upload(req,res,function(err) {
if(err) {
return res.end("Error uploading file.");
}
res.end("File is uploaded successfully!");
});
});
app.listen(2000,function(){
console.log("Server is running on port 2000");
});
要安装的package.json,执行以下代码:
npm install
文章图片
它将在“JTP文件上传”文件夹内创建一个新的文件夹“node_modules”。
文章图片
依赖安装。现在,运行服务器:
node server.js
文章图片
打开本地网页http://127.0.0.1:2000/上传的图片。
文章图片
选择要上传的图片,并点击“上传图片”按钮。
文章图片
在这里,你可以看到该文件被上传成功。你可以看到上传的文件中的“上传”文件夹。
文章图片
下载Node.js的快递文件上传实例
推荐阅读
- Express.js中间件
- Express.js Cookie
- Express.js路由
- Express.js POST请求
- Express.js GET请求
- Express.js响应Response
- Express.js请求
- 安装Express.js
- Express.js入门介绍