form.parse()方法工作原理解析：fields、files及formidable模块疑问

Hey there! Let’s break down exactly how the formidable module works, and clear up your confusion around what fields and files represent in the form.parse() callback.

First: What does formidable do? #

formidable is a Node.js module built specifically to handle multipart/form-data requests—this is the request type used when submitting forms that include file uploads (like your example form). Node.js’s built-in HTTP module can’t parse this type of request natively, so formidable takes care of reading the incoming request stream, splitting it into parts, and organizing the data for you.

How does form.parse() work? #

When you call form.parse(req, callback), the module starts processing the incoming request:

1. It reads the entire request body, which is split into "parts" (one part for each input in your form).
2. It categorizes each part into either a regular form field or an uploaded file.
3. Once parsing is complete, it triggers your callback function with three parameters:
   • err: An error object if something went wrong during parsing (e.g., invalid request data, file upload failure).
   • fields: An object containing all non-file form inputs.
   • files: An object containing all uploaded file details.

Let’s break down fields and files with your code example #

Your form only has a file input (name="fileupload") and a submit button. Here’s what you’ll see in the callback:

• fields: This will be an empty object ({}) because your form has no regular inputs (like text boxes, checkboxes, etc.). If you added a field like <input type="text" name="username">, fields.username would hold the text the user entered.
• files: This will be an object with a key matching your file input’s name (fileupload). The value is an object with details about the uploaded file, like:
  • originalFilename: The name of the file as it was on the user’s device (e.g., vacation-photo.png).
  • filepath: The temporary path where formidable stored the file on your server (e.g., /tmp/xyz123.png).
  • size: The file size in bytes.
  • mimetype: The MIME type of the file (e.g., image/png or application/pdf).

Example of a working callback #

To make this concrete, here’s how you might expand your code to see the data in action:

const http = require('http');
const formidable = require('formidable');
const fs = require('fs'); // We'll use this to move the uploaded file

http.createServer(function (req, res) {
  if (req.url == '/fileupload') {
    const form = new formidable.IncomingForm();
    // Optional: Set a custom directory for temporary file storage
    // form.uploadDir = './temp-uploads';

    form.parse(req, function(err, fields, files) {
      if (err) {
        console.error('Parsing error:', err);
        res.write('Upload failed due to an error.');
        res.end();
        return;
      }

      // Log the data to see what you're working with
      console.log('Regular form fields:', fields);
      console.log('Uploaded file details:', files);

      // Example: Move the temporary file to a permanent location
      const oldPath = files.fileupload.filepath;
      const newPath = './uploads/' + files.fileupload.originalFilename;
      fs.rename(oldPath, newPath, function(err) {
        if (err) throw err;
        res.write('File uploaded successfully!');
        res.end();
      });
    });
  } else {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
    res.write('<input type="file" name="fileupload"><br>');
    res.write('<input type="submit">');
    res.write('</form>');
    res.end();
  }
}).listen(8080);

Key takeaways #

• formidable handles the heavy lifting of parsing file upload requests.
• fields = all regular form data (non-file inputs).
• files = metadata and temporary storage info for uploaded files.
• Always check the err parameter first to handle parsing failures gracefully.

内容的提问来源于stack exchange，提问作者tomtom