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

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

news 2026/5/25 7:54:17

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

摘要

对于学习前端的小伙伴都有一个困惑，就是平常想上手小项目，但碍于不想购买服务器，实践受到了限制。
一般我选择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

基于AIS数据与随机森林的船舶类型智能识别：从特征工程到不平衡数据处理

1. 项目概述与核心价值在海上交通管理、港口调度、渔业监管乃至海上安全监测等领域&#xff0c;快速、准确地识别船舶类型是一项基础且关键的任务。想象一下&#xff0c;一个繁忙的港口调度员面对雷达屏幕上密密麻麻的光点&#xff0c;如果能瞬间知道哪些是庞大的油轮、哪些是灵…...

编程新知 2026/5/25 7:12:53

嵌入式开发中LLM应用的挑战与优化实践

1. 嵌入式系统开发中的LLM应用现状嵌入式系统开发作为连接软件与硬件的关键领域&#xff0c;其特殊性给大语言模型&#xff08;LLM&#xff09;的应用带来了独特挑战。与通用软件开发不同&#xff0c;嵌入式开发需要处理硬件寄存器配置、实时性要求、资源约束等底层问题。当前主…...

编程新知 2026/5/25 6:57:12

WSL2开发环境部署

系统要求 安装前需要确保设备满足以下条件: 操作系统: Windows 10版本2004(内部版本19041)或Windows 11(按Win R输入winver查看版本)。硬件: 64 位处理器(需要在BIOS中启用虚拟化,Intel VT-x/AMD-V) 至少4GB内存(推荐8GB)。 20GB以上存储空间(建议SSD)。 启用必要功能 …...

编程新知 2026/5/25 6:23:40

Java YOLO推理精度漂移终极解决方案：从预处理到后处理的工业级优化指南

做Java+YOLO工业部署的朋友，相信都遇到过这个噩梦：Python端训练时mAP高达90%，导出ONNX模型到Java端一跑，精度直接掉到60%甚至更低，同一个目标在Python里置信度0.9，到Java里只有0.3，检测框要么飘到天边，要么同一个目标出好几个框。 我在汽车零部件质检项目上就踩过这个…...

编程新知 2026/5/25 6:14:57

（干货整理）实测好用的AI写作辅助网站，毕业党收藏备用

毕业季论文写作真的这么难&#xff1f;选题纠结、文献找不全、写到一半卡壳、查重反复修改、格式总出错…… 这份实测推荐的AI论文工具合集&#xff0c;覆盖中英文写作、全流程辅助、专项功能&#xff0c;免费和高性价比都有&#xff0c;从开题到定稿全程护航&#xff0c;毕业生…...

编程新知 2026/5/25 6:01:41

保姆级教程：用阿里云镜像加速Unity Android依赖下载，搞定MAX+Admob集成

深度优化Unity安卓依赖下载&#xff1a;阿里云镜像加速MAX与AdMob集成实战国内Unity开发者在集成海外广告SDK时&#xff0c;最头疼的莫过于Gradle依赖下载缓慢甚至失败的问题。本文将手把手教你如何通过阿里云镜像仓库彻底解决这一痛点&#xff0c;同时串联Gradle版本管理、mai…...

编程新知 2026/5/25 5:53:39

2026年怎么安装OpenClaw？阿里云部署及配置Token Plan保姆级指南

2026年怎么安装OpenClaw&#xff1f;阿里云部署及配置Token Plan保姆级指南。OpenClaw是开源的个人AI助手&#xff0c;Hermes Agent则是一个能自我进化的AI智能体框架。阿里云提供计算巢、轻量服务器及无影云电脑三种部署OpenClaw 与 Hermes Agent的方案、百炼Token Plan兼容主…...

编程新知 2026/5/25 5:31:11

模拟神经计算电路：噪声与非均匀性挑战下的网络架构优化与再训练策略

1. 项目概述与核心挑战在材料科学、药物发现乃至自动驾驶的实时决策中&#xff0c;我们常常需要模型以极高的速度处理海量数据&#xff0c;进行预测或推理。传统的数字计算机在执行这类任务时&#xff0c;面临着功耗和计算延迟的瓶颈。于是&#xff0c;一个极具吸引力的替代方案…...

编程新知 2026/5/25 5:21:36

UE5 Vulkan PC平台适配核心：DataDrivenPlatformInfo.ini详解

1. 这不是配置文件&#xff0c;是UE5 Vulkan平台适配的“宪法性文档”你打开UE5项目目录下的Engine/Config/Platform/路径&#xff0c;一眼扫过去&#xff0c;DataDrivenPlatformInfo.ini这个文件名平平无奇——它不像DefaultEngine.ini那样天天被修改&#xff0c;也不像BaseEn…...

编程新知 2026/5/25 4:14:31

量子机器学习模拟器性能优化与门层特性解析

1. 量子机器学习模拟器的性能优化之道量子机器学习(QML)作为量子计算与经典机器学习的交叉领域&#xff0c;其核心挑战在于如何高效模拟量子电路的演化过程。传统量子模拟器如PennyLane的default.qubit采用通用方法处理各类量子门操作&#xff0c;未能充分考虑不同门类型的数学…...

编程新知 2026/5/25 4:08:24