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

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

news 2026/2/8 6:02:05

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

摘要

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

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2026/2/8 4:37:29

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/10/27 21:25:04

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2026/2/1 19:26:16

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2026/2/7 10:59:04

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2026/1/31 12:52:29

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/12/3 10:52:37

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2026/1/26 14:15:48

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

编程新知 2026/2/2 3:59:34

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...

编程新知 2026/2/4 16:04:11