Node.js第十篇：formidable包实现文件上传

  • Z时代
  • 2024-01-10
  • 分类：综合

编程

formidable模块文档使用：https://www.npmjs.com/package/formidable

以下是一个demo：

前端程序：index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #imgs img {
      width: 100px;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <!-- 
    entype 属性规定在发送到服务器之前应该如何对表单数据进行编码。
    值：application/x-www-form-urlencoded 在发送前编码所有字符（默认）
    值：multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
   -->
  <form action="/upload" method="POST" enctype="multipart/form-data">
    <p>
      <span>用户名：</span>
      <input type="text" name="username">
    </p>
    <p>
      <span>邮箱：</span>
      <input type="email" name="email">
    </p>
    <p>
      <span>照片：</span>
      <input type="file" multiple name="photos" id="photos">
    </p>
    <div id="imgs"></div>
    <p><button>提交</button></p>
  </form>
  <script>
    // 获取文件控件
    var photos = document.querySelector("#photos")
    // 监听文件是否上传
    photos.onchange = function () {
      // 获取上传的文件列表-数组
      var files = photos.files;
      // 循环遍历
      for (var i = 0; i < files.length; i++) {
        // 闭包，解决FileReader对象的onload事件覆盖问题
        (function () {
          // 创建文件读取对象
          var reader = new FileReader()
          // 读取上传的文件-异步
          reader.readAsDataURL(files[i])
          // 读取完毕后
          reader.onload = function () {
            // 创建img元素
            var imgDom = document.createElement("img")
            // 把读取的文件值设置给img元素的src属性，便于显示
            imgDom.src = reader.result;
            // 追加到页面中
            document.getElementById("imgs").appendChild(imgDom)
            // 释放资源reader
            reader = null;
          }
        })()
      }
    }
  </script>
</body>
</html>

服务端程序：app.js

const express = require("express")
const path = require("path")
// 导入formidable模块
const formidable = require("formidable")
const app = express()
app.use(express.static(path.join(__dirname, "./public")))
app.post("/upload", (req, res) => {
  // 创建表单解析对象
  const form = new formidable.IncomingForm()
  // 配置上传文件的位置
  form.uploadDir = path.join(__dirname, "./public/uploads")
  // 保留上传文件的后缀
  form.keepExtensions = true
  // 是否是多文件上传
  form.multiples = true
  // 解析表单
  form.parse(req, (err, fields, files) => {
    // err 错误对象
    // fields 普通表单数据
    // files 文件上传数据
    console.log(fields)
    console.log(files)
    res.send("ok")
  })
})
app.listen(80)

以上是 Node.js第十篇：formidable包实现文件上传 的全部内容， 来源链接： utcz.com/z/516358.html

回到顶部