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

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

news 文章来源：https://blog.csdn.net/qq_47828130/article/details/129160453 2025/4/30 6:58:29

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

摘要

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

Boost库文档搜索引擎

文章目录综述效果展示去标签化&#xff0c;清理数据构建索引用户查询综述 该项目使用了BS架构&#xff0c;实现了用户对Boost库进行站内搜索的功能&#xff0c; 用户输入关键字使用http协议通过ajax将数据发送给后端服务器&#xff0c;后端进行分词&#xff0c; 通过倒排索引…...

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

Linux中安装JDK

Linux中安装JDK一 、下载JDK包1、下载网址2、往下翻&#xff0c;找到 java83、继续往下翻找到要下载的版本 64位linux版本二 上传jdk安装包三 开始安装整体过程1、解压文件2、查看解压文件3、进入解压文件夹确认4、配置环境变量5、重新加载环境变量6、确认安装成功一 、下载JDK…...

编程日记 2023/2/23 0:58:53

宝塔面板公网ip非80端口非443端口部署ssl

有不少人使用家用宽带&#xff0c;虽然申请下来了公网ip&#xff0c;但是运营商封了80与443端口&#xff0c;但仍想使用ssl证书 一、仅封80端口 1、先在宝塔面板里创建网站&#xff0c;域名为test.xxx.cn:8085 2、再到域名运营商做A记录解析&#xff0c;此时可以通过http://…...

编程日记 2023/2/23 0:57:42

手撕八大排序（上）

排序的概念及其引用&#xff1a; 排序的概念&#xff1a; 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。 稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;存在多个具有…...

编程日记 2023/2/23 0:56:30

clickhouse 怎么统计每天0点到10点的某个字段的数据量

比喻&#xff1a;统计最近一周0点到10点期间每天id的数量 日期&#xff1a;2023-03-23 09:02:22 日期全是这种格式 第一步先把日期转小时&#xff1a;先把小于10小时的查出来 toHour(card_time)<10 select toDate(t.dates) as dates,sum(t.count) as count from ( se…...

编程日记 2023/2/23 0:55:18

[qiankun]-图片加载问题

[qiankun]-图片加载问题开发版本图片加载报错现象描述分析解决方案base64的展示格式静态资源的展示方式取消hash的取值方式&#xff0c;并在主应用中添加图片设置图片的绝对路径根据环境动态设置图片的绝对路径nginx转发方式开发版本 "vue": "^3.2.45", &…...

编程日记 2023/2/23 0:54:07

关于upstream的八种回调方法

1 creat_request调用背景&#xff1a;用于创建自己模板与第三方服务器的第一次连接步骤1&#xff09; 在Nginx主循环&#xff08;ngx_worker_process_cycle方法&#xff09; 中&#xff0c;会定期地调用事件模块&#xff0c; 以检查是否有网络事件发生。2&#xff09; 事件模块…...

编程日记 2023/2/23 0:52:53

0303泰勒公式-微分中值定理与导数的应用

文章目录1 引入2 泰勒中值定理2.1 泰勒多项式3.2 泰勒中值定理13.3 泰勒中值定理22.4 误差估计4 麦克劳林公式5 常见麦克劳林公式6 泰勒公式相关例题6.1 将函数展成指定的泰勒公式6.1.1 公式法6.1.2 间接展法&#xff08;变量替换&#xff09;6.2 利用泰勒公式求极限6.3 确定无…...

编程日记 2023/2/23 0:51:35

日常运维基础命令

commandexplainps -f -u user_name显示指定用户的进程ps aux --sort-pcpu,pmem先以cpu使用量进行排序&#xff0c;cpu使 用一样&#xff0c;以内存使用率排序ps -ef --forest显示ACLII进程数ps --ppid 28208显示父进程的子进程ps -p 14447 -L显示进程的线程ps -e -o pid&#x…...

编程日记 2023/2/23 0:50:25

人员行为识别系统 TensorFlow

人员行为识别系统人员行为识别系统通过TensorFlow深度学习技术&#xff0c;人员行为识别算法对画面中区域人员不按要求穿戴、违规抽烟打电话、睡岗离岗以及作业流程不规范实时分析预警&#xff0c;发现违规行为立即抓拍告警。深度学习应用到实际问题中&#xff0c;一个非常棘手…...

编程日记 2023/2/23 0:49:14