记录一下学习 express过程，实现上传图片功能呢。

该文介绍了如何结合Express和Multer中间件在Node.js环境中搭建一个简单的图片上传功能。通过配置Multer的存储策略，实现了文件保存至服务器指定目录，并返回图片的服务器路径。同时，文章提供了一个HTML表单和JavaScript上传逻辑，展示了客户端如何发送图片到服务器并获取上传结果。

摘要由CSDN通过智能技术生成

本文系转载，

使用express+multer实现node中的图片上传功能 – 悠悠之家
https://www.uoften.com/article/55900.html
自己试了一遍，可以。

app.js

const http = require("http");
const path = require("path");
const express = require("express");

//是nodejszhogn 处理multipart/form-data数据个饿死（主要用户上传功能的中间件
// 文档
const multer = require("multer");
const app = express();

//配饰 express jintaom目录
app.use(express.static(path.join(__dirname, "public")));
app.get("/", (req, res) => {
    res.sendFile(__dirname + "/index.html");
});

//配置 diskStorage 来控制文件存储的位置以及文件名等
var storage = multer.diskStorage({
    //确定图片存储的位置
    destination: function (req, file, cb) {
        cb(null, "./public/uploadImgs");
    },
    // ![](http://images2017.cnblogs.com/blog/1283058/201802/1283058-20180201154342296-515041615.png)
    //确定图片存储的名字，注意，如果使用原名，可能会造成再次上传同一张图片是冲突
    filename: function (req, file, cb) {
        cb(null, Date.now() + file.originalname);
    },
});
//生成的专门处理上传的一个工具，可以传入storage, lismits等配置
var upload = multer({ storage: storage });

app.post("/upload", upload.single("file"), function (req, res, next) {
    //图片已经被放入服务器里，且req也已经被upload中间件处理好了（加上了file等信息)
    //先杀NGDE YEJI就是 服务器中的图片的绝对地址
    var url = "/uploadImgs" + req.file.filename;
    res.json({
        code: 200,
        data: url,
    });
});
http.createServer(app).listen(3000, () => {
    console.log("server is running on 3000");
});

index.html

<!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>
</head>

<body>
  <!-- 
  <form action="/process_post" method='post'>
    First name: <input type="text" name="first_name"><br>
    Last name: <input type="text" name="last_name">
    <input type="submit" value="submit">
  </form> -->
  <!-- 
  <form action="/file_upload" method="post" enctype="multipart/form-data">
    <input type="file" name="image" size="50" />
    <br>
    <input type="submit" value="文件上床">
  </form> -->

  <div class="form-group">
    <label> File input: </label>
    <input type="file" name="file" id="file">
    <p id="result"></p>
    <img src="" id="img">
  </div>
  <button id="upload" class="btn btn-default">提交</button>


</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
  //上传图片的业务逻辑函数
  function uploadFile() {
    //上传图片的input
    var file = document.getElementById("file")
    //因为准备用post提交，又因为图片的内容比较大，所以我们选择使用FORMDATA来承载数据
    //创建formdata对象
    var formData = new FormData();
    //给 formdata对象中放入数据（键值对的方式）
    formData.append('file', file.files[0])
    //提交请求
    $.ajax({
      url: '/upload', //请求路径
      type: 'POST',
      data: formData,
      contentType: false, //为了让浏览器根据传入的formdata来判断contentType
      processData: false, //同上
      success: function(data) {
        if (200 === data.code) {
          $('#result').html("上传成功！");
          $('img').attr('src', data.data);
        } else {
          $('#result').html("上传失败！");
        }
        console.log(2);

      },
      error: function() {
        $('#result').html("与服务器通信发生错误");
      }
    });
    console.log(1);

  }
  // 为按钮添加点击事件
  function postPage() {
    //上传按钮
    var uploada = document.getElementById('upload');
    uploada.addEventListener('click', function() {
      uploadFile();
    }, false);
  }
  window.onload = function() {
    postPage();
  }
</script>

</html>

xiaoguo 非常好。