Node.js进阶之【14】 : multer模块,post方式获取客户端上传的文件

一、multer模块

一、multer模块介绍

  1. multer 模块需要进行【下载】。
  2. multer 模块可以帮我们获取到客户端通过post【上传过来的文件】,对文件进行解析,获取到上传的文件的详情信息。
  3. body-parser 模块可以获取到客户端通过 【post 上传过来的数据】,不是文件。但是它不能对上传的文件进行解析获取。
    此时我们如果要对上传的文件进行解析,需要用 multer 模块。

二、multer模块应用

我们现在要做客户端文件上传到服务器的操作,并对上传过来的文件放在【根目录www】下的【upload文件夹】,并对上传的文件进行文件原来上传前拓展名显示,方便我们在服务器也能看到这个文件的格式。操作如下:

    1. 下载 multer模块
cnpm i multer
    1. 引入multer 模块,服务器部署
const express = require('express');
const fs = require('fs');
const multer = require('multer');
 //  path模块可以帮助我们获取到文件的拓展名部分
const pathLib = require('path'); 

let server = express();
// multer里dest指定上传的文件在服务器的路径,我们这里上传的文件是放在根目录www下的upload文件夹里
//  multer里面有一个属性,dest可以帮我们把上传的文件写入磁盘,不写入内存里,写入内存不好。太占内存了。
let multerObj = multer({'dest':'./www/upload'});
// multerObj.any()表示上传的文件不限定文件名
server.use(multerObj.any());
server.use('/',(req,res) => {
  if(req.url !== '/favicon.ico') {
    // 通过req.files可以获取到上传的文件数据,这里返回的是一个数组
    let fileUpload = req.files[0];
    // 获取fileUpload文件的拓展名
    let fileExt = pathLib.parse(fileUpload.originalname).ext;
    // 获取fileUpload文件的名称部分
    let fileName = fileUpload.path;
    // 上传文件后的新名称
    let newName = fileName + fileExt;
    // 把上传的旧名称更换成新名称
    fs.rename(fileUpload.path, newName, (err) => {
      if(err) {
              res.send('上传失败')
          } else{
              res.send('上传成功')
          }
      })
    }
  })
  server.listen(8080)
    1. 客户端页面部署【form.html】
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 上传文件 enctype="multipart/form-data"表示该post数据发送给服务器的是文件,不是数据-->
    <form action="http://localhost:8080/" method="post" enctype="multipart/form-data">
        选择文件:<input type="file" name="f1">
        <input type="submit" value="上传">
    </form>
</body>
</html>
    1. 运行服务器


      image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1. 构建 Web 应用(服务器端) 1. 构建 Web 应用(服务器端)1.1. 基础功能1.1.1. HTTP...
    wlszouc阅读 3,947评论 0 1
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 6,511评论 0 2
  • 此文档于2016年10月3日翻译时multer的版本是1.2.0,它可能不是最新的!甚至可能存在翻译错误!你可能需...
    塔塔七阅读 8,479评论 0 0
  • 个人入门学习用笔记、不过多作为参考依据。如有错误欢迎斧正 目录 简书好像不支持锚点、复制搜索(反正也是写给我自己看...
    kirito_song阅读 7,309评论 1 37
  • 人从一生下来就有了名字,不管是小名,还是正式的姓名,作为一个代号,将伴随我们一生。 我在家中排行老四,小时候父母叫...
    西岭布衣阅读 3,434评论 1 7

友情链接更多精彩内容