前端文件上传怎么实现（前端如何实现本地图片上传？）

时间2025-09-19 12:42:46分类IT科技浏览6319

导读：前端如何实现本地图片上传？摘要...

前端如何实现本地图片上传？

摘要

对于学习前端的小伙伴都有一个困惑，就是平常想上手小项目，但碍于不想购买服务器，实践受到了限制。

一般我选择node.js搭建服务器，毕竟基于JavaScript语言，简直不是一家人不进一家门。

但是，刚学node.js只会链接数据库进行增删改查，图片上传简直就是渣渣……

现在，我的思路是这样的，在没有云服务器的情况下，利用node.js搭建本地服务器，将图片放在项目项目目录下，名字最好排序，方便前端项目遍历……

前端页面设计和代码实现

在前端页面中需要包含一个表单，用于用户上传图片。表单中需要设置 enctype 属性为 “multipart/form-data ” ，这样才能上传二进制文件（图片）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form action="http://127.0.0.1:3000/upload" method="post" enctype="multipart/form-data" target="_parent"> <input type="file" name="image" /> <input type="submit" value="上传" /> </form> </body> </html>

后端服务器代码实现

安装模块

1. npm init -y 2. npm i express multer -S

在后端服务器中，需要使用 Node.js 的 express 框架来创建路由。具体的实现方式如下：

const express = require(express) const multer = require(multer) const app = express() let index = 0 //设置存储路径和文件名 const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, ./uploads) }, filename: function (req, file, cb) { index += 1 cb(null, index + .png) } }) const upload = multer({ storage: storage }) app.post(/upload, upload.single(image), function (req, res, next) { const file = req.file if (!file) { const error = new Error(请上传图片) error.httpStatusCode = 400 return next(error) } res.send({ msg: 上传成功 }) }) app.listen(3000, function () { console.log(服务器已经启动) })

在上述代码中，使用了 multer 中间件来处理图片上传。具体实现步骤如下：

设置存储路径和文件名；初始化上传配置对象；创建一个路由用于处理文件上传；启动服务器，监听 3000 端口。

封装组件

<template> <div> <input type="file" @change="handleUpload"> <button @click="uploadImage">上传</button> </div> </template> <script> export default { name: "ImageUploader", data() { return { file: null, imageUrl: "", }; }, methods: { handleUpload(event) { this.file = event.target.files[0]; }, uploadImage() { const formData = new FormData(); formData.append("image", this.file); // 发送上传请求 axios.post("/upload", formData).then((res) => { this.imageUrl = res.data.imageUrl; }); }, }, }; </script>

这个组件包含一个文件选择框和一个上传按钮，用户可以通过选择文件来上传图片。当用户点击上传按钮时，会将图片通过 axios 库发送给后端 /upload 接口进行处理，然后将图片链接赋值给 imageUrl 变量，以便在页面上显示上传的图片。请注意，这只是一个简单的示例，实际上还需要对上传的图片进行一些检查和处理，例如检查文件大小、类型和命名等。