使用Node.js实现单文件上传功能—含代码解释

最新推荐文章于 2024-09-10 09:55:59 发布

6230_

最新推荐文章于 2024-09-10 09:55:59 发布

阅读量654

点赞数 14

分类专栏：前端基础文章标签：前端 javascript node.js 改行学it 学习开发语言 html

本文链接：https://blog.csdn.net/2301_78675670/article/details/142029681

版权

前端基础专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、概念

文件上传的具体内容
- 在前端让用户发送(上传)图片，图片由后端(服务器)接收，并转存到到服务端设备上的操作
- node.js的文件上传功能主要是使用：multer 插件实现的
搭建一个图片上传的接口
- 先让接口开通，再去做插件下载/配置等操作
- 我们确定请求路径是：http://localhost:3000/upload后，也就确定了可以访问得到响应数据
阅读multer文档
- 文档: multer中文文档
使用multer插件
- 下载插件：npm i multer
注意
- 测试接口的时候，需要前端 来完成接口的请求发送
- 浏览器直接发起请求这个事行不通，因为浏览器地址栏只能发起get请求 ，但是我们现在使用的请求方式是post请求

2、示例—核心代码

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// 把路由表直接挂在到app上 
// 这种路径引入表示直接引入 routes/index.js 
let routes = require("./routes");
app.use( routes );

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

3、示例—index

let router = require("express").Router();
let test = require("./test");

// 挂载路由
router.use( "/test" , test )
// 注意：这里的用法是用的简写 => 本来是用变量接收引入的upload，在放置在全局路由中的
router.use("/upload" , require("./upload"));

// 暴露路由对象
module.exports = router;

4、示例—upload(单文件上传子路由)

图片上传路由 => 先测试路由通不通：添加一个get("/") 路由测试即可

// 1、引入multer插件及express服务器框架
     let router = require("express").Router();
     let multer = require("multer");
// 测试路由是否通了
     router.get("/" , ( req , res )=>{
         res.send("upload功能路由!");
     })

// 3、配置multer中间件 => 创建一个中间价实例
     // 3.1、配置单文件的中间件，并设置配置项：配置上传图片的存储位置 => 放在uploads(叫啥随意)这个文件夹中
          // 1）创建了一个 multer 中间件实例，用于处理文件上传。
          // 2）dest: "uploads/" 表示上传的文件将被保存到服务器的 "uploads" 目录中。
          // 3）upload 是这个中间件实例的变量名，你可以在后续的路由中使用它来处理文件上传
     let upload = multer( { dest : "uploads/"} )  

// 5、编写处理响应的中间件
     function handlerRes( req , res ){
    // 5.1）图片上传结束后，会有一些图片的信息，这些图片的信息都放在了req对象中，我们可以在single中间件处理结束后使用这些数据 
    // 5.2）信息分别有：req.file => 图片存储文件夹，以及req.body：文本域数据 => 几乎不用 
    //! 注意：这些信息是阅读文档的说明得知的 
         let data = {
             code : 1 ,
             file : req.file , 
             body : req.body 
         }
        // 5.3）返回响应数据
         res.json(data)
     }
// 4、使用中间件完成图片上传的功能配置 => get能上传的数据太小了，所以这里使用post比较合适
     // 1）语法：upload.single => 单图片上传的中间件
     // 2）参数：upload.single("图片字段")
     // 3）解释：用post请求profile接口，把图片数据按照正确的格式上传，由upload...中间价处理图片，结束后它会调用 handlerRes 
     router.post("/profile" , upload.single("avatar") ,handlerRes )

// 2、暴露路由对象
     module.exports = router;

5、示例—前端文件上传页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传页面</title>
</head>
<body>
    <h2>文件上传</h2>
    <!-- 使用form表单传递图片 => 注意：enctype="multipart/form-data"属性必须携带，不带的话不能携带图片上传 -->
    <form action="/upload/profile" method="post" enctype="multipart/form-data" >
        <!-- 添加图片的上传容器： 
               1）我们在服务端规定了图片上传字段，所以我们要给input添加name属性 => upload中的upload.single("avatar")
               2）name属性的值就是服务端定义的字段值 -->
        <input type="file" name="avatar">
        <button>提交图片</button>
        流程：
             1）当提交按钮被点击时，请求就会向/upload/profile发送，并用post请求携带enctype...属性，
             2）name中的字段是avatar，字段里的数据我们上传的图片数据
        注意：
             一定是在http://localhost:3000/这个服务器路径下打开的，/upload/profile是表示在http://localhost:3000直接拼接的
    </form>
</body>
</html>