欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Node.js：借助formidable文件上传

程序员文章站 2022-05-30 13:13:45
...

概述

  1. node.js在处理客户端以POST方式提交的数据时，比较复杂，要写两个监听（data、end），并且要处理上传的图片、文件时也比较艰难
  2. 常用第三方模块包formidable来处理客户端以POST方式提交的表单、文件、图片等

使用GitHub使用文档

  1. 安装npm install formidable
  2. 引入const formidable = require('formidable');
  3. 在服务器端引入formidableconst formidable = require('formidable');
  4. 在post请求中
    ① 实例化
    let form = new formidable.IncomingForm();
    ② 指定文件上传文件夹
    form.uploadDir = path.join(__dirname, 'dir');
    ③ 指定文件后缀是否保存
    form.keepExtensions = true;
    ④ 解析request发送过来的数据
    form.parse(req, function (err, fields, files) {
    if (err) {
        throw err;
    }
    console.log(fields);
    console.log(files);
    res.end('success');
});

使用注意

  1. 表单提交的过程中涉及文件或者图片上传，则一定要设置表单头，即在form标签上加属性为enctype="multipart/form-data",否则文件或图片会上传时效
  2. < input type=“file” name=“uploadImg”>，当中的name属性一定要赋值
  3. 前端传递数据的时候，不可以使用序列化，要是用new FormData($form[0]),
  4. 前端发起ajax请求的时候，不要将数据处理转化成一个查询字符串processData: false,
  5. 前段发起ajax请求的时候，不要设置请求头contentType:false

案例

  1. 前端界面
    index2.ejs

    <!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
<form action="/" method="post" enctype="multipart/form-data">
    <label>
        时间：
        <input type="text" name="l_name">
    </label>
    <br>
    <label>
        地点：
        <input type="text" name="l_address">
    </label>
    <br>
    <label>
        人物：
        <input type="file" name="l_person">
    </label>
    <br>
    <input id="btn_sub" type="button" value="提交">
</form>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script>
    $('#btn_sub').on('click', function () {
        var $form = $('form');
        $.ajax({
            url: $form.attr('action'),
            type: $form.attr('method'),
            data: new FormData($form[0]),
            // 不要处理转化成一个查询字符串
            processData: false,
            contentType: false,
            success: function (data) {
                console.log(data);
            }
        })
    });
</script>
</body>
</html>

  2. 服务器代码

    const express = require('express');
const path = require('path');
const fs = require('fs');
const formidable = require('formidable');

const app = express();

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

app.use('/node_modules', express.static(path.join(__dirname, '/node_modules')));

app.get('/', (req, res, next) => {
    res.render('index2');
});

app.post('/', (req, res, next) => {
    // 1. 创建实例
    let form = new formidable.IncomingForm();
    // 2. 指定文件的上传文件夹
    form.uploadDir = path.join(__dirname, 'dir');
    // 3. 指定文件的后缀
    form.keepExtensions = true;

    // 4. 解析request发送过来的数据
    form.parse(req, function (err, fields, files) {
        if (err) {
            throw err;
        }
        console.log(fields);
        console.log(files);
        res.end('success');
    });
});


app.listen(2000, () => {
    console.log('running!')
});
相关标签： Node

上一篇： node使用formidable处理文件上传

下一篇： 新搜索工具：整合Twitter与Google

推荐阅读