一直想尝试使用node搭建个文件服务器,今天简单写了一下,后面会慢慢完善,一起学习哈

首先,我们在做文件上传的时候,很多时候会使用到文件服务器. 从前端来说的话, 我们把数据上传到文件服务器上,然后文件服务器返回给我们一个你所上传文件的一个访问地址

也就是说文件服务器首先要读取到我们前端所上传的数据,接着,需要把文件存放到服务器的指定目录下,最后把存储地址存入数据库并返回给前台

了解了原理之后,做起来思路就比较明确了

准备工作

需要保证拥有node环境

具体的node的安装(windows和linux)见博主的另一篇博客:

创建一个文件夹node(任意名字),再文件夹下创建一个文件 serve.js(服务器文件)和index.html(前端测试文件),还有uploads文件夹(用于存储前端上传的文件夹)

在node文件夹下打开控制台,执行 npm init ,执行完成之后会生成一个package.json文件,即配置文件

server文件的完善

具体代码如下所示, 注释的很详细哦

// 要使用npm install 安装express和formidable
// 要保证和当前文件夹同级，拥有uploads文件夹
var Express = require('express');
var App = Express();
var Path = require('path');
var Formidable = require('formidable');
var FS = require('fs');
App.all('*',function (req, res, next) {
// 解决跨域
res.header('Access-Control-Allow-Origin', '*');
// 设置相应头数据
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
// 设置接收的方法
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
next();
});
App.post('/upload', function(req, res){
// 创建一个表单对象
var form = new Formidable.IncomingForm();
// 开启该功能，当调用form.parse()方法时，回调函数的files参数将会是一个file数组，数组每一个成员是一个File对象，此功能需要 html5中multiple特性支持。
form.multiples = true;
// 设置当前上传的文件存储到,当前文件的/uploads文件夹下
form.uploadDir = Path.join(__dirname, '/uploads');
var dirUrl
// 监听上传的文件数据
form.on('file', function(field, file) {
var newName = file.name;
// 重命名
FS.rename(file.path, Path.join(form.uploadDir,newName),function(err) {
if(err){
throw err;
}
});
// 得到当前上传文件的存储路径
dirUrl = Path.join(form.uploadDir,newName)
});
// 监听报错
form.on('error', function(err) {
console.log('An error: \n' + err);
});
// 当接受数据完成时,将当前上传的文件的目录返回给前台
form.on('end', function() {
res.send(dirUrl);
});
// 解析请求中携带的数据
form.parse(req);
});
// 启动服务设置端口
var server = App.listen(1000, function(){
console.log('Files Server listening on port 1000');
})
前端的测试代码
我这里是使用了vue,这个无所谓,仅供参考,你自己写原生的也可以测试哈
Document 
 
class="upload-demo"
action="http://localhost:1000/upload"
>
点击上传
 
 
new Vue({
el:'#main',
data:{}
})

结合上面的代码,就是搭建一个本地文件服务器了,当然了,我是直接一次性的返回了你所上传的文件的路径,而并没有将其路径存入数据库中

这步比较简单了,毕竟路径都拿到了.