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

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

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

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

准备工作

需要保证拥有node环境

具体的node的安装(windows和linux)见博主的另一篇博客:https://blog.csdn.net/rolinabc/article/details/99623255?spm=1001.2014.3001.5501

创建一个文件夹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

new Vue({

el:'#main',

data:{}

})

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

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

如果不会将数据插入数据库的话,可以见我的另外一篇博客:https://blog.csdn.net/rolinabc/article/details/107003549?spm=1001.2014.3001.5501

(疯狂安利自己的博客,啊哈哈哈)

前端小菜鸟,希望可以批评指正,共同学习,进步哈