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

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

news 2025/12/21 17:13:02

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

摘要

对于学习前端的小伙伴都有一个困惑，就是平常想上手小项目，但碍于不想购买服务器，实践受到了限制。
一般我选择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 -y2. 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 += 1cb(null, index + '.png')}
})const upload = multer({ storage: storage })app.post('/upload', upload.single('image'), function (req, res, next) {const file = req.fileif (!file) {const error = new Error('请上传图片')error.httpStatusCode = 400return next(error)}res.send({ msg: '上传成功' })
})app.listen(3000, function () {console.log('服务器已经启动')
})

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

  1. 设置存储路径和文件名；
  2. 初始化上传配置对象；
  3. 创建一个路由用于处理文件上传； 启动服务器，监听 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 变量，以便在页面上显示上传的图片。请注意，这只是一个简单的示例，实际上还需要对上传的图片进行一些检查和处理，例如检查文件大小、类型和命名等。

相关文章：

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

前端如何实现本地图片上传&#xff1f; 摘要 对于学习前端的小伙伴都有一个困惑&#xff0c;就是平常想上手小项目&#xff0c;但碍于不想购买服务器&#xff0c;实践受到了限制。 一般我选择node.js搭建服务器&#xff0c;毕竟基于JavaScript语言&#xff0c;简直不是一家人…...

编程日记 2023/2/23 1:26:11

【基础算法】差分的应用（一维差分和二维差分）

&#x1f339;作者:云小逸 &#x1f4dd;个人主页:云小逸的主页 &#x1f4dd;Github:云小逸的Github &#x1f91f;motto:要敢于一个人默默的面对自己&#xff0c;强大自己才是核心。不要等到什么都没有了&#xff0c;才下定决心去做。种一颗树&#xff0c;最好的时间是十年前…...

编程日记 2023/2/23 1:24:55

第49章 API统一集中管理

1 关于统一集中管理API的一些思考 1、统一集中管理是保证工程性项目得保质、保量、成功实施&#xff0c;并对后期维护提供数据支撑的最有效&#xff0c;最节省资源和时间的技能和做法&#xff0c;软件做为一种特殊的工程性项目&#xff0c;也符合上述特性。 2、由于在前台实现中…...

编程日记 2023/2/23 1:23:45

carla0.9.13-UE4添加4轮车模型（Linux系统）

前期准备建模工具&#xff1a;blender:v3.4.1&#xff1b;可以在Ubuntu Software商店直接下载虚拟引擎&#xff1a;carla-UE4 (carla v0.9.13)&#xff0c;无需额外安装UE4&#xff0c;carla中自带插件编译carla参照官方文档&#xff1a;https://carla.readthedocs.io/en/0.9.1…...

编程日记 2023/2/23 1:22:25

对比yolov4和yolov3

目录 1. 网络结构的不同 1.1 Backbone 1.1.1 Darknet53 1.1.2 CSPDarknet53 1.2 Neck 1.2.1 FPN 1.2.2 PAN 1.2.3 SPP 1.3 Head 2. ​​​​​数据增强​​​​​ 2.1 CutMix 2.2 Mosaic 3. 激活函数 4. 损失函数 5. 正则化方法 知识点 记录备忘。 总体而言&…...

编程日记 2023/2/23 1:21:17

Android ServiceManager

1.ServiceManager ServiceManager在init进程启动后启动，用来管理系统中的Service。 一般开机过程分为三个阶段： ①OS级别，由bootloader载入linux内核后，内核开始初始化，并载入built-in的驱动程序，内核完成开机后，载入init process，切换至user-space后，结束内核的循…...

编程日记 2023/2/23 1:19:59

数据挖掘，计算机网络、操作系统刷题笔记53

数据挖掘&#xff0c;计算机网络、操作系统刷题笔记53 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&#xff0c;可能很多算法学生都得去找开发&#xff0c;测开 测开的话&#xff0c;你就得学数据库&#xff0c;sql&#xff0c;orac…...

编程日记 2023/2/23 1:17:40

地球板块运动vr交互模拟体验教学提高学生的学习兴趣

海陆变迁是地球演化史上非常重要的一个过程&#xff0c;它不仅影响着地球的气候、地貌、生物多样性等方面&#xff0c;还对人类文明的演化产生了深远的影响。为了帮助学生更加深入地了解海陆变迁的过程和机制&#xff0c;很多高校教育机构开始采用虚拟现实技术进行教学探究。 V…...

编程日记 2023/2/23 1:16:27

【Android玩机】跟大家聊聊面具Magisk的使用（安装、隐藏）

目录:1、Magisk中文网2、隐藏面具和Root&#xff08;一共3种方法&#xff09;1、Magisk中文网 &#xff08;1&#xff09;首先Magisk有一个中文网&#xff0c;对新手非常友好 &#xff08;2&#xff09;这网站里面主要包含&#xff1a;6 部分 &#xff08;3&#xff09;按照他给…...

编程日记 2023/2/23 1:15:15

DACS: Domain Adaptation via Cross-domain Mixed Sampling 学习笔记

DACS介绍方法Naive MixingDACSClassMix![在这里插入图片描述](https://img-blog.csdnimg.cn/ca4f83a2711e49f3b754ca90d774cd50.png)算法流程实验结果反思介绍 近年来&#xff0c;基于卷积神经网络的语义分割模型在众多应用中表现出了显著的性能。然而当应用于新的领域时&…...

编程日记 2023/2/23 1:14:04

python并发编程(并发与并行，同步和异步，阻塞与非阻塞）

最近在学python的网络编程&#xff0c;学了socket通信&#xff0c;并利用socket实现了一个具有用户验证功能&#xff0c;可以上传下载文件、可以实现命令行功能&#xff0c;创建和删除文件夹&#xff0c;可以实现的断点续传等功能的FTP服务器。但在这当中&#xff0c;发现一些概…...

编程日记 2023/2/23 1:12:51

【项目】DTO、VO以及PO之间的关系和区别

【项目】DTO、VO以及PO之间的关系和区别 文章目录【项目】DTO、VO以及PO之间的关系和区别1.概念2. 作用1.概念 DTO&#xff1a;DTO是 Data Transfer Object 的缩写&#xff0c;也叫数据传输对象。 PO&#xff1a;PO是 Persistent Object 的缩写&#xff0c;也叫持久化对象。 …...

编程日记 2023/2/23 1:11:40

Nginx介绍

什么是Nginx&#xff1f; Nginx 是一款高性能的 http 服务器/反向代理服务器及电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器。由俄罗斯的程序设计师伊戈尔西索夫&#xff08;Igor Sysoev&#xff09;所开发&#xff0c;官方测试 nginx 能够支支撑 5 万并发链接&#x…...

编程日记 2023/2/23 1:10:26

你什么档次？敢和我用一样的即时通讯平台WorkPlus？

现今&#xff0c;很多企业越来越青睐私有化部署&#xff0c;尤其是在选择组织内部即时通讯平台的时候&#xff0c;更是会提出私有化部署的需求。究其原因&#xff0c;企业选择私有化部署即时通讯软件完全是出于安全方面考虑。因此&#xff0c;越来越多的企业将眼光望向了本地化…...

编程日记 2023/2/23 1:09:11

学习资源 - 深度学习

文章目录PyTorchNLP语音CV深度学习其它在我过往博客笔记中&#xff0c;每个专项技术&#xff0c;前面我会贴上官网、官方文档、书籍教程等。 但有些topic&#xff0c;资源比较分散&#xff1b;一个博主/up主&#xff0c;也有可能有多个topic的分享&#xff0c;这里分享我遇到的…...

编程日记 2023/2/23 1:07:52

C语言数据结构初阶(1)----时空复杂度

目录 1. 数据结构&#xff0c;算法的概念 2. 算法的效率 2.1 算法复杂度 3. 时间复杂度 3.1 时间复杂度的概念 3.2 大O的渐进表示法 3.3 小试牛刀 4. 算法的空间复杂度 4.1 小试牛刀 1. 数据结构&#xff0c;算法的概念 数据结构(Data Structure)是计算机存储、组织数据…...

编程日记 2023/2/23 1:06:39

vscode SSH 保存密码自动登录服务器

先在win local上拿到秘钥&#xff0c;然后再把这秘钥copy 进服务器 1. 创建 RSA 密钥对 第一步是在客户端机器&#xff08;通常是您的计算机 win 10&#xff09;上创建密钥对&#xff1a;打开powershell, 输入 ssh-keygen默认情况下ssh-keygen将创建一个 2048 位 RSA 密钥对…...

编程日记 2023/2/23 1:05:27

VR全景多种玩法打破传统宣传，打造全新云端视界

传统的展示方式只是在进行单方面的表达&#xff0c;不论是图片、视频&#xff0c;都无法让浏览者有参与感&#xff0c;这样的展示宣传效果自然比不上VR全景展示&#xff0c;VR全景基于真实场景来形成三维图像&#xff0c;其沉浸式和无视野盲区的特点让用户更有真实感和沉浸感&a…...

编程日记 2023/2/23 1:04:02

Git 教程

目录1.简介&#xff1a;2.安装Git3.Git 如何工作状态区域4.使用Git5.Git配置5.1 创建仓库 - repository5.2 配置5.2.1 --global5.2.2 检查配置6. 查看工作区的文件状态6.1什么是工作区6.2 如果显示乱码的解决方式7.在工作区添加单个文件8. 添加工作区文件到暂存区9. 创建版本10…...

编程日记 2023/2/23 1:02:35

一种全新的图像滤波理论的实验（二）

一、前言 2021年12月31日&#xff0c;我发布了基于加权概率模型的图像滤波算法的第一个实验&#xff0c;当时有两个关键问题没有解决&#xff1a; 1、出现了大面积的黑色区域&#xff0c;最近考虑把这个算法实际应用在图像和视频的压缩领域&#xff0c;于是通过对程序的分析&a…...

编程日记 2023/2/23 1:01:19

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2025/12/18 17:36:43

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/7/21 15:40:47

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2025/12/20 9:37:32

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

编程新知 2025/12/14 6:17:45

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

编程新知 2025/12/21 0:52:06

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

编程新知 2025/12/21 3:30:52

上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

编程新知 2025/8/18 3:01:22

云安全与网络安全：核心区别与协同作用解析

在数字化转型的浪潮中&#xff0c;云安全与网络安全作为信息安全的两大支柱&#xff0c;常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异&#xff0c;并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全&#xff1a;聚焦于保…...

编程新知 2025/12/12 12:44:52

Python常用模块：time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的： 快速搭建小型Web服务器以提供数据。 工具： 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask： 建议： 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议： 打开 Py…...

编程新知 2025/10/15 8:34:59