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

2024年5月23日 131次阅读 来源: 橙程橙

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
  <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
   <div id="main">
    <el-upload
    class="upload-demo"
    action="http://localhost:1000/upload"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
   </div>
   <script>
     new Vue({
       el:'#main',
       data:{}
     })
   </script>
</body>
</html>

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

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

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

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

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

 

 

    原文作者：橙程橙
    原文地址: https://blog.csdn.net/rolinabc/article/details/113987007
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞