前端如何实现本地图片上传？
前端如何实现本地图片上传？
摘要
对于学习前端的小伙伴都有一个困惑，就是平常想上手小项目，但碍于不想购买服务器，实践受到了限制。
一般我选择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…...
网络编程（Modbus进阶）
思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中，Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染（即CPU被阻塞），这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案： 对惹，这里有一个游戏开发交流小组&…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件： 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树 浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置，使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块，它提供了一个轻量级的 HTTP 服务器实现，主要用于构建基于 HTTP 的应用程序和服务。 功能介绍： 主要功能 HTTP服务器功能： 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
uniapp中使用aixos 报错
问题： 在uniapp中使用aixos，运行后报如下错误： AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
网络编程（UDP编程）
思维导图 UDP基础编程（单播） 1.流程图 服务器：短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...