node 搭建本地文件上传服务器

一直想尝试使用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,这个无所谓,仅供参考,你自己写原生的也可以测试哈

  
  
  
  
  
  





   

    
    点击上传
  
   
   

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

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

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

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

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