前端如何实现本地图片上传？
前端如何实现本地图片上传？
摘要
对于学习前端的小伙伴都有一个困惑，就是平常想上手小项目，但碍于不想购买服务器，实践受到了限制。
一般我选择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 中间件来处理图片上传。具体实现步骤如下：
- 设置存储路径和文件名；
- 初始化上传配置对象；
- 创建一个路由用于处理文件上传； 启动服务器，监听 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 变量，以便在页面上显示上传的图片。请注意，这只是一个简单的示例，实际上还需要对上传的图片进行一些检查和处理，例如检查文件大小、类型和命名等。
相关文章：
前端如何实现本地图片上传？
前端如何实现本地图片上传？ 摘要 对于学习前端的小伙伴都有一个困惑，就是平常想上手小项目，但碍于不想购买服务器，实践受到了限制。 一般我选择node.js搭建服务器，毕竟基于JavaScript语言，简直不是一家人…...
【基础算法】差分的应用（一维差分和二维差分）
🌹作者:云小逸 📝个人主页:云小逸的主页 📝Github:云小逸的Github 🤟motto:要敢于一个人默默的面对自己，强大自己才是核心。不要等到什么都没有了，才下定决心去做。种一颗树，最好的时间是十年前…...
第49章 API统一集中管理
1 关于统一集中管理API的一些思考 1、统一集中管理是保证工程性项目得保质、保量、成功实施，并对后期维护提供数据支撑的最有效，最节省资源和时间的技能和做法，软件做为一种特殊的工程性项目，也符合上述特性。 2、由于在前台实现中…...
carla0.9.13-UE4添加4轮车模型（Linux系统）
前期准备建模工具：blender:v3.4.1；可以在Ubuntu Software商店直接下载虚拟引擎：carla-UE4 (carla v0.9.13)，无需额外安装UE4，carla中自带插件编译carla参照官方文档：https://carla.readthedocs.io/en/0.9.1…...
对比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. 正则化方法 知识点 记录备忘。 总体而言&…...
Android ServiceManager
1.ServiceManager ServiceManager在init进程启动后启动，用来管理系统中的Service。 一般开机过程分为三个阶段： ①OS级别，由bootloader载入linux内核后，内核开始初始化，并载入built-in的驱动程序，内核完成开机后，载入init process，切换至user-space后，结束内核的循…...
数据挖掘，计算机网络、操作系统刷题笔记53
数据挖掘，计算机网络、操作系统刷题笔记53 2022找工作是学历、能力和运气的超强结合体，遇到寒冬，大厂不招人，可能很多算法学生都得去找开发，测开 测开的话，你就得学数据库，sql，orac…...
地球板块运动vr交互模拟体验教学提高学生的学习兴趣
海陆变迁是地球演化史上非常重要的一个过程，它不仅影响着地球的气候、地貌、生物多样性等方面，还对人类文明的演化产生了深远的影响。为了帮助学生更加深入地了解海陆变迁的过程和机制，很多高校教育机构开始采用虚拟现实技术进行教学探究。 V…...
【Android玩机】跟大家聊聊面具Magisk的使用（安装、隐藏）
目录:1、Magisk中文网2、隐藏面具和Root（一共3种方法）1、Magisk中文网 （1）首先Magisk有一个中文网，对新手非常友好 （2）这网站里面主要包含：6 部分 （3）按照他给…...
DACS: Domain Adaptation via Cross-domain Mixed Sampling 学习笔记
DACS介绍方法Naive MixingDACSClassMix算法流程实验结果反思介绍 近年来，基于卷积神经网络的语义分割模型在众多应用中表现出了显著的性能。然而当应用于新的领域时&…...
python并发编程(并发与并行，同步和异步，阻塞与非阻塞）
最近在学python的网络编程，学了socket通信，并利用socket实现了一个具有用户验证功能，可以上传下载文件、可以实现命令行功能，创建和删除文件夹，可以实现的断点续传等功能的FTP服务器。但在这当中，发现一些概…...
【项目】DTO、VO以及PO之间的关系和区别
【项目】DTO、VO以及PO之间的关系和区别 文章目录【项目】DTO、VO以及PO之间的关系和区别1.概念2. 作用1.概念 DTO：DTO是 Data Transfer Object 的缩写，也叫数据传输对象。 PO：PO是 Persistent Object 的缩写，也叫持久化对象。 …...
Nginx介绍
什么是Nginx？ Nginx 是一款高性能的 http 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。由俄罗斯的程序设计师伊戈尔西索夫（Igor Sysoev）所开发，官方测试 nginx 能够支支撑 5 万并发链接&#x…...
你什么档次？敢和我用一样的即时通讯平台WorkPlus？
现今，很多企业越来越青睐私有化部署，尤其是在选择组织内部即时通讯平台的时候，更是会提出私有化部署的需求。究其原因，企业选择私有化部署即时通讯软件完全是出于安全方面考虑。因此，越来越多的企业将眼光望向了本地化…...
学习资源 - 深度学习
文章目录PyTorchNLP语音CV深度学习其它在我过往博客笔记中，每个专项技术，前面我会贴上官网、官方文档、书籍教程等。 但有些topic，资源比较分散；一个博主/up主，也有可能有多个topic的分享，这里分享我遇到的…...
C语言数据结构初阶(1)----时空复杂度
目录 1. 数据结构，算法的概念 2. 算法的效率 2.1 算法复杂度 3. 时间复杂度 3.1 时间复杂度的概念 3.2 大O的渐进表示法 3.3 小试牛刀 4. 算法的空间复杂度 4.1 小试牛刀 1. 数据结构，算法的概念 数据结构(Data Structure)是计算机存储、组织数据…...
vscode SSH 保存密码自动登录服务器
先在win local上拿到秘钥，然后再把这秘钥copy 进服务器 1. 创建 RSA 密钥对 第一步是在客户端机器（通常是您的计算机 win 10）上创建密钥对：打开powershell, 输入 ssh-keygen默认情况下ssh-keygen将创建一个 2048 位 RSA 密钥对…...
VR全景多种玩法打破传统宣传，打造全新云端视界
传统的展示方式只是在进行单方面的表达，不论是图片、视频，都无法让浏览者有参与感，这样的展示宣传效果自然比不上VR全景展示，VR全景基于真实场景来形成三维图像，其沉浸式和无视野盲区的特点让用户更有真实感和沉浸感&a…...
Git 教程
目录1.简介：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…...
一种全新的图像滤波理论的实验（二）
一、前言 2021年12月31日，我发布了基于加权概率模型的图像滤波算法的第一个实验，当时有两个关键问题没有解决： 1、出现了大面积的黑色区域，最近考虑把这个算法实际应用在图像和视频的压缩领域，于是通过对程序的分析&a…...
XML Group端口详解
在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...
从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路
进入2025年以来，尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断，但全球市场热度依然高涨，入局者持续增加。 以国内市场为例，天眼查专业版数据显示，截至5月底，我国现存在业、存续状态的机器人相关企…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述：iview使用table 中type: "index",分页之后 ，索引还是从1开始，试过绑定后台返回数据的id, 这种方法可行，就是后台返回数据的每个页面id都不完全是按照从1开始的升序，因此百度了下，找到了…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
基础测试工具使用经验
背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容（一）CDN 基础概念1. 定义2. 组成部分 （二）CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 （三）CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
2023赣州旅游投资集团
单选题 1.“不登高山，不知天之高也；不临深溪，不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...
人机融合智能 | “人智交互”跨学科新领域
本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...