Nuxt.js中实现用户图片上传并存储至public文件夹的方法

1. 前端代码调整 #

第一步：在组件data中添加变量 #

先在组件的data选项里声明存储选中文件的变量：

data() {
  return {
    plateName: '',
    platePrice: '',
    plateSelect: '',
    selectedFile: null // 新增：存储选中的图片文件
  }
}

第二步：完善uploadImg方法 #

修改uploadImg方法，获取用户选中的图片并做格式校验：

uploadImg() {
  const fileInput = document.getElementById('formFile');
  const file = fileInput.files[0];
  if (!file) return;

  // 仅允许上传图片格式
  const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
  if (!allowedTypes.includes(file.type)) {
    alert('请上传JPG/PNG/GIF格式的图片');
    fileInput.value = ''; // 清空无效选择
    return;
  }

  this.selectedFile = file;
}

第三步：修改addFood方法，用FormData提交数据 #

因为要上传文件，不能用普通JSON提交，改用FormData封装表单数据：

addFood() {
  if (!this.selectedFile) {
    alert('请先选择菜品图片');
    return;
  }

  const formData = new FormData();
  formData.append('plateName', this.plateName);
  formData.append('platePrice', this.platePrice);
  formData.append('course', this.plateSelect);
  formData.append('image', this.selectedFile);

  $fetch("/api/insert/", {
    method: "POST",
    body: formData
    // 无需手动设置Content-Type，浏览器会自动添加multipart/form-data及边界标识
  })
  .then(() => window.location.href = "/inserimento")
  .catch((e) => alert(e))
}

2. 后端（Nuxt API）调整 #

第一步：安装文件上传依赖 #

在项目根目录执行：

npm install multer

第二步：修改API路由文件（/server/api/insert/index.js） #

编写处理文件上传和数据库插入的逻辑：

import multer from 'multer';
import path from 'path';
import fs from 'fs';
// 替换成你实际的数据库连接实例
import db from '@/utils/db';

// 确保public/images目录存在，用于存储上传的图片
const uploadDir = path.join(process.cwd(), 'public', 'images');
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir, { recursive: true });
}

// 配置multer存储规则：生成唯一文件名避免覆盖
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, uploadDir);
  },
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    const ext = path.extname(file.originalname);
    cb(null, `food-${uniqueSuffix}${ext}`);
  }
});

const upload = multer({ storage: storage });

export default defineEventHandler(async (event) => {
  // 处理单文件上传
  await new Promise((resolve, reject) => {
    upload.single('image')(event.node.req, event.node.res, (err) => {
      if (err) reject(err);
      else resolve();
    });
  });

  // 获取表单文本字段
  const { plateName, platePrice, course } = await readBody(event);
  // 生成图片的相对访问路径（前端可直接通过/public/images/xxx访问）
  const imgPath = `/images/${event.node.req.file.filename}`;

  // 修改SQL语句，新增图片路径字段
  const sql = `INSERT INTO menu (food_name, price, course, img_path) VALUES (?, ?, ?, ?)`;
  await db.query(sql, [plateName, platePrice, course, imgPath]);

  return { success: true };
});

3. 数据库表结构修改 #

给menu表新增img_path字段，用于存储图片的相对路径：

ALTER TABLE menu ADD COLUMN img_path VARCHAR(255) NOT NULL;

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