[ TOC ]
原因：
因为最近在开发一个基因比对的一个项目，需要将本地文件上传至服务器，然后再读取其中的数据与数据库中的数据进行比对，计算出相似度。
开发软件
Mac + webstrom(2017.1.3) + node(v8.2.0)
实现过程
step1:
打开webstrom新建一个空项目，命名为upload，在Terminal中输入如下命令：
npm init(然后一路enter)
npm install express --save-dev
npm install ejs --save-dev
npm install fs --save-dev
npm install multiparty --save-dev
step2:
创建文件目录，并在views文件夹下面添加index.html文件，如下图所示：
upload
....node_modules
....uploads
....views
....index.html
....app.js
....package.json
....package-lock.json
step3:
编写app.js文件
//加载库文件
var express = require('express'),
path = require('path'),
ejs = require('ejs'),
fs = require('fs'),
multiparty = require('multiparty'),
app = express();
//设置模板引擎
app.engine('.html', ejs.renderFile);
app.set('view engine', 'html');
//设置模板目录
app.set('views', path.join(__dirname, 'views'));
//获取index.html页面
app.get('/', function (req, res) {
res.render('./index');
});
app.post('/upload', function (req, res) {
var form = new multiparty.Form({uploadDir: './uploads'});
form.parse(req, function(err, fields, files) {
var fileOriginalFilename = files.thumbnail[0].originalFilename;
var filePath = files.thumbnail[0].path;
var dstPath = './uploads/' + fileOriginalFilename;
fs.rename(filePath, dstPath, function (err) {
if (err) {
console.log('rename error: ' + err);
} else {
console.log('rename ok');
}
});
res.send('upload success');
});
});
//创建web服务器，访问"http://localhost:3002"
var server = app.listen(3002, function () {
var host = server.address().address;
var port = server.address().port;
console.log('App listening at http://%s%s', host, port);
});
step4:
编写index.html文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>upload</title>
</head>
<body>
<form id="formOne" method="post" enctype="multipart/form-data" action="/upload">
//注意此处name="thumbnail"，与step3中"files.thumbnail[0].fieldName;"，thumbnail要一致
<input type="file" id="file" name="thumbnail"/>
<input type="submit"/>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
<script>
//防止没有选择文件直接点击提交
$('#formOne').bind('submit', function () {
var fileValue = $('#file').val();
if (!fileValue) {
alert("请选择文件");
return false;
}
})
</script>
</body>
</html>
网友评论