如何用Node.js formidable将图片转JSON？上传时ctx.req.files为undefined怎么办？

Hey there! Let’s tackle your two Formidable-related questions step by step—no jargon, just practical fixes and explanations.

1. Fixing ctx.req.files/ctx.req.file Returning Undefined #

This issue almost always boils down to how you’re integrating Formidable with your framework (looks like you’re using Koa, given the ctx object). Here’s what to check:

• Explicitly parse the request with Formidable
  Koa doesn’t auto-handle multipart requests, so you need to manually parse ctx.req (the native Node.js request object). For modern Formidable versions (v3+), use the promise-based API:

  const formidable = require('formidable');
  
  // Inside your Koa route handler
  async (ctx) => {
    try {
      // Initialize Formidable (enable `multiples` if uploading multiple files)
      const form = formidable({ multiples: true });
      // Parse the request to get fields and files
      const { fields, files } = await form.parse(ctx.req);
      
      console.log(files); // This should now show your uploaded files!
      ctx.body = { success: true, files };
    } catch (err) {
      ctx.status = 500;
      ctx.body = { error: err.message };
    }
  };
  

  For older Formidable versions (v2.x), wrap the callback in a promise:

  const { fields, files } = await new Promise((resolve, reject) => {
    form.parse(ctx.req, (err, fields, files) => {
      if (err) reject(err);
      resolve({ fields, files });
    });
  });
  

• Validate your request’s Content-Type
  Your frontend must send the request with Content-Type: multipart/form-data. If using an HTML form, add enctype="multipart/form-data" to the <form> tag. If using axios/fetch, don’t manually set the Content-Type—let the browser/library auto-generate it (it adds the required boundary string automatically).

• Remove conflicting middleware
  Middleware like body-parser consumes the request body before Formidable can access it. Make sure body-parser isn’t handling multipart/form-data requests, or exclude your upload route from body-parser processing.

• Check Formidable options

  • For single-file uploads, files will be an object where the key is your form field name (e.g., files.profilePic instead of files being an array).
  • Set multiples: true if you expect multiple files—this makes the field value an array when multiple files are uploaded.

2. Converting Images to JSON with Formidable #

Images are binary data, so to convert them to JSON, you’ll encode the binary content as a Base64 string (since JSON only supports text). Here’s how to do it:

1. Read the uploaded image’s content using the file path provided by Formidable.
2. Convert the binary buffer to a Base64 string.
3. Package the Base64 string along with metadata (like filename, MIME type) into a JSON object.

Example code:

const fs = require('fs').promises;
const formidable = require('formidable');

async (ctx) => {
  const form = formidable({ multiples: false });
  const { files } = await form.parse(ctx.req);
  const imageFile = files.yourImageField; // Replace with your form field name

  // Convert image to JSON
  const imageBuffer = await fs.readFile(imageFile.filepath);
  const base64Image = imageBuffer.toString('base64');
  
  const imageJson = JSON.stringify({
    filename: imageFile.originalFilename,
    mimeType: imageFile.mimetype,
    size: imageFile.size,
    data: base64Image // The Base64-encoded image content
  });

  ctx.body = { success: true, imageJson };
  // Clean up the temporary file if you don't need it anymore
  await fs.unlink(imageFile.filepath);
};

Quick Notes: #

• Base64 encoding increases file size by ~30%, so this isn’t ideal for large images. If you don’t need the actual image content in JSON, store metadata like file path, size, or access URL instead.
• Always clean up Formidable’s temporary files after processing to avoid filling up disk space.

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