前端如何实现本地图片上传？
前端如何实现本地图片上传？
摘要
对于学习前端的小伙伴都有一个困惑，就是平常想上手小项目，但碍于不想购买服务器，实践受到了限制。
一般我选择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…...
rknn优化教程（二）
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...
中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试
作者：Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位：中南大学地球科学与信息物理学院论文标题：BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接：https://arxiv.…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验
系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试，通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小，增大可提高计算复杂度duration: 测试持续时间（秒&…...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
2023赣州旅游投资集团
单选题 1.“不登高山，不知天之高也；不临深溪，不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享 文件木马：https://w…...