AdonisJS图片上传报错：Cannot read property 'subtype' of null求助

Hey there! Let's figure out why your image upload is throwing that Cannot read property 'subtype' of null error. I see you're new to AdonisJS and jumping right in without prior JavaScript experience—props for that, let's fix this step by step.

The core issue is that request.file("logo") is returning null, meaning AdonisJS isn't picking up your uploaded file at all. Then when you try to access imageFile.subtype, you get the null reference error. Let's break down the fixes:

1. Fix Your Route Configuration #

First, make sure your route is set up to handle the PUT request correctly. In your start/routes.js file, add this route to map the PUT request to your ImageController.update method:

Route.put('/image/:id', 'ImageController.update')

Your form uses ?_method=PUT (which is the right way to simulate PUT requests in HTML forms), so the route needs to listen for PUT requests to that path.

2. Remove the Unnecessary request.only(["logo"]) Line #

request.only() is designed for grabbing regular text form fields, not file uploads. Since logo is a file input, this line does nothing and can be deleted entirely.

3. Add Checks for the Uploaded File Before Processing #

Never assume the file was successfully received—always validate that imageFile exists first. Here's how to adjust your update method:

async update({ request, response, params }) { // Add params to get the brand ID from URL
  const ValidationOptions = {
    types: ["image"],
    size: "5mb",
    extnames: ["png", "gif", "jpg", "jpeg"],
  };

  const imageFile = request.file("logo", ValidationOptions);
  
  // First check if the file was actually uploaded
  if (!imageFile) {
    return response.badRequest('No image file was uploaded');
  }

  console.log(imageFile);

  let imageUploadPath = Env.get("IMAGE_UPLOAD_PATH");
  let imagePath = Helpers.publicPath(imageUploadPath);
  
  // Now safely access subtype since we confirmed imageFile isn't null
  let fileName = `${Math.floor(Math.random() * (999999 - 100000 + 1)) + 100000}-${new Date().getTime()}.${imageFile.subtype}`;

  await imageFile.move(imagePath, {
    name: fileName,
    overwrite: true,
  });

  let appUrl = Env.get("APP_URL");
  let imageUrl = `${appUrl}${imageUploadPath}/${fileName}`;

  if (!imageFile.moved()) {
    let error = imageFile.error();
    throw new Error(JSON.stringify(error));
  }

  // Fix: Update the existing brand instead of creating a new one!
  const brand = await Brand.findOrFail(params.id); // Fetch the target brand
  brand.logo = imageUrl;
  await brand.save(); // Save the updated logo to the database

  return response.redirect('/brands');
}

Notice I added params to the method parameters—you need this to grab the brand ID from the URL, so you can update the correct brand entry instead of creating a new one (your original code used await Brand.create(iData) which was making a new brand, not updating the existing one).

4. Double-Check Your Form's Action Attribute #

Your edge template uses /image/{{brand.id}}?_method=PUT for the form action—that's correct, as long as brand.id is properly populated when rendering the view (which it looks like it is, since your imageAdd method passes the brand to the view).

• Ensure your route handles PUT requests to /image/:id
• Remove request.only(["logo"]) since it doesn't work for file uploads
• Add a check for !imageFile before accessing its properties
• Update the existing brand (use findOrFail + save) instead of creating a new one

That should get your image upload working properly! Let me know if you hit any other snags.

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