基于 Vue 和 Node.js 实现图片上传功能：从前端到后端的完整实践

在开发一个社交分享平台时，图片上传功能是核心需求之一。本文将基于一个旅拍社交分享系统，详细解析其图片上传功能的实现原理和技术细节，包括前端处理、后端接收和数据库存储等环节。

1. 前端图片上传实现

在这个项目中，图片上传功能主要在resend.vue组件中实现，用户可以通过表单选择图片并提交到服务器。

核心代码片段：

<template>
  <a-form :model="formData" ref="forRef">
    <!-- 其他表单字段 -->
    <a-form-item label="上传图片" name="upload">
      <input type="file" @change="handleAvatarChange" class="file-input" />
    </a-form-item>
    <a-button @click="handelChange">提交</a-button>
  </a-form>
</template>

<script setup>
import { ref } from 'vue'

const formData = ref({})

// 处理图片选择
const handleAvatarChange = (event) => {
  const file = event.target.files[0]
  if (file) {
    formData.value.avatarFile = file  // 保存选中的文件
  }
}

// 提交表单
const handelChange = async () => {
  await forRef.value.validateFields()
  
  // 创建FormData对象
  const formPayload = new FormData()
  
  // 添加文本字段
  formPayload.append('title', formData.value.title)
  formPayload.append('content', formData.value.content)
  // ...其他字段
  
  // 添加文件字段（关键部分）
  if (formData.value.avatarFile) {
    formPayload.append('avatar', formData.value.avatarFile)
  }

  // 发送请求
  const res = await resendDataList(formPayload)
  if (res.code == 200) {
    message.success('发帖成功！')
    router.push('./home')
  } else {
    message.error('发帖失败！')
  }
}
</script>

代码解释：

1. 文件选择处理：

   • 通过<input type="file">触发文件选择对话框
   • handleAvatarChange方法将选中的文件保存到formData.avatarFile

2. 表单数据处理：

   • 使用FormData对象封装表单数据，支持二进制文件上传
   • append方法将文本字段和文件字段添加到FormData中

3. 请求发送：

   • 使用axios（封装在resendDataList中）发送请求
   • 设置Content-Type为multipart/form-data，由浏览器自动处理边界

2. 后端图片接收与处理

后端使用 Node.js 和 Express 框架处理图片上传请求，并使用multer中间件处理文件。

核心代码片段（resend.js）：

const express = require("express");
const router = express.Router();
const multer = require('multer');
const db = require("../db/index");

// 配置multer存储引擎
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "E:/test/img");  // 存储路径
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname);  // 文件名格式
  }
});

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

// 处理图片上传请求
router.post('/addResendList', upload.single('avatar'), (req, res) => {
  // 调试日志
  console.log('[请求体]', req.body);
  console.log('[上传文件]', req.file);

  // 参数校验
  const requiredFields = ['title', 'content', 'address', 'category', 'longitude', 'latitude'];
  const missingFields = requiredFields.filter(field => !req.body[field]);
  
  if (missingFields.length > 0) {
    return res.status(400).json({
      status: 1,
      message: `缺少必填字段: ${missingFields.join(', ')}`,
      code: 400
    });
  }

  // 处理图片路径
  const imagePath = req.file ? `/static/${req.file.filename}` : '';

  // 插入数据库
  const insertSql = `
    INSERT INTO list_table 
    (account, title, content, address, category, longitude, latitude, images, create_time, visibility) 
    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
  `;
  
  db.query(insertSql, [
    req.body.account,
    req.body.title,
    req.body.content,
    req.body.address,
    req.body.category,
    req.body.longitude,
    req.body.latitude,
    imagePath,
    new Date(),
    'all'
  ], (err, result) => {
    if (err) {
      console.error('[数据库错误]', err);
      return res.status(500).json({
        status: 1,
        message: '数据库操作失败',
        error: err.message,
        code: 500
      });
    }

    res.status(200).json({
      status: 0,
      data: {
        table_id: result.insertId,
        images: imagePath
      },
      message: "提交成功",
      code: 200
    });
  });
});

代码解释：

1. Multer 配置：

   • diskStorage指定文件存储路径和文件名格式
   • upload.single('avatar')处理单个文件上传，字段名为avatar

2. 文件处理：

   • req.file包含上传的文件信息（文件名、大小、类型等）
   • 图片被保存到指定目录，并生成唯一文件名（时间戳 + 原文件名）

3. 数据库操作：

   • 将图片路径（如/static/1638532765432-avatar.jpg）存入数据库
   • 通过table_id关联图片与打卡点信息

注意⚠️：实际参数可自行调整修改。

3. 图片展示与访问

前端通过拼接完整 URL 访问服务器上的图片：

代码片段（UserPost.vue）：

<template>
  <div class="post-card">
    <img :src="'http://localhost:8080' + post.images" alt="User Post" />
  </div>
</template>

后端配置（app.js）：

// 设置静态资源目录
app.use('/static', express.static('E://test//img'));

解释：

• 前端通过http://localhost:8080/static/文件名访问图片
• 后端使用express.static中间件将/static路径映射到实际存储目录

4. 关键技术点总结

1. 前端要点：

   • 使用FormData处理混合表单数据（文本 + 文件）
   • 文件选择事件绑定与数据缓存
   • 图片预览功能（本文未展示，但可通过FileReader实现）

2. 后端要点：

   • multer中间件处理文件上传
   • 文件存储策略（路径、命名规则）
   • 图片路径与业务数据关联

3. 安全与优化建议：

   • 文件类型验证（限制只允许图片格式）
   • 文件大小限制（防止大文件攻击）
   • 图片压缩处理（减少存储和传输成本）
   • 图片访问权限控制（私有图片需身份验证）

总结

通过这个项目的实现，我们可以看到图片上传功能的完整流程：从前端表单选择，到后端接收存储，再到最终展示。关键在于前后端的协作：前端正确构建FormData对象，后端使用合适的中间件处理文件，并将文件路径与业务数据关联。

这种实现方式不仅适用于旅拍社交系统，也可应用于各种需要图片上传功能的 Web 应用中。通过合理的架构设计和安全措施，可以构建出高效、稳定的图片上传服务。

注意：内容仅供参考，实际项目中可按需要进行修改和排查。