当前位置：首页 > news >正文

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

news 来源：原创 2025/5/20 6:50:15

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

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>

代码解释：

文件选择处理：
- 通过<input type="file">触发文件选择对话框
- handleAvatarChange方法将选中的文件保存到formData.avatarFile
表单数据处理：
- 使用FormData对象封装表单数据，支持二进制文件上传
- append方法将文本字段和文件字段添加到FormData中
请求发送：
- 使用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});});
});

代码解释：

Multer 配置：
- diskStorage指定文件存储路径和文件名格式
- upload.single('avatar')处理单个文件上传，字段名为avatar
文件处理：
- req.file包含上传的文件信息（文件名、大小、类型等）
- 图片被保存到指定目录，并生成唯一文件名（时间戳 + 原文件名）
数据库操作：
- 将图片路径（如/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. 关键技术点总结

前端要点：
- 使用FormData处理混合表单数据（文本 + 文件）
- 文件选择事件绑定与数据缓存
- 图片预览功能（本文未展示，但可通过FileReader实现）
后端要点：
- multer中间件处理文件上传
- 文件存储策略（路径、命名规则）
- 图片路径与业务数据关联
安全与优化建议：
- 文件类型验证（限制只允许图片格式）
- 文件大小限制（防止大文件攻击）
- 图片压缩处理（减少存储和传输成本）
- 图片访问权限控制（私有图片需身份验证）