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

Multer 实现文件上传功能

Multer 实现文件上传功能

  • 前言:
  • Multer 安装和使用
    • 1、安装
    • 2、使用
      • 2-1 前端代码
      • 2-2 后端代码
    • 3、实现效果

前言:

  post请求一般有4种数据类型:

  • application/x-www-form-urlencoded
  • multipart/form-data
  • application/json
  • text/xml

  相应后端Express会使用不同的中间件来解析不同类型的数据,比如

  • express.text()可解析text类型的req.body,解析成String
  • express.json()可解析json数据的req.body
  • express.urlencoded() 可解析urlencoded类型的req.body

  上述中间件都是基于 body-parser 中间件封装的,body-parser官网明确说明无法处理multipart类型的req.body
  所以需要安装第三方中间件Multer,来处理multipart类型的req.body,主要针对的是文件。

Multer 安装和使用

1、安装

npm i multer

2、使用

  具体信息与配置,请看 Multer 官网: https://www.npmjs.com/package/multer

  本文以图片文件为例,文档文件又涉及到另一层面,文件预览问题。好多知识点~~

2-1 前端代码

  前端使用Vue + ElementPlus ,实现文件上传功能需用到ElementPus 中的Upload组件

  具体配置,请参考ElementPlus Upload组件官网:https://element-plus.org/zh-CN/component//upload.html

  新建UploadFile.vue

<template><div class="container"><el-upload:action="url"list-type="picture-card":on-success="sucess"><el-icon><i-ep-plus/></el-icon>// 添加加载效果,提高用户体验<template #file="{ file }" v-loading="loading">               <el-image :src="file.url" class="img"></el-image>    <span class="el-upload-list__item-actions"><spanclass="el-upload-list__item-preview"@click=

相关文章:

Multer 实现文件上传功能

Multer 实现文件上传功能 前言:Multer 安装和使用1、安装2、使用2-1 前端代码2-2 后端代码3、实现效果前言: post请求一般有4种数据类型: application/x-www-form-urlencodedmultipart/form-dataapplication/jsontext/xml相应后端Express会使用不同的中间件来解析不同类型的…...

Excel·VBA工作表导出为图片

《Excel转图片别再截图啦&#xff01;用这4个方法&#xff0c;高清且无损&#xff01;》&#xff0c;excel转为图片一般方法较为简单&#xff0c;那么能否使用vba将excel转为图片 选中区域导出为图片 zoom设置为2&#xff0c;导出图片较为清晰 Sub 选中区域导出为图片()Dim …...

【零基础抓包】Fiddler超详细教学(一)

​Fiddler 1、什么是 Fiddler? Fiddler 是一个 HTTP 协议调试代理工具&#xff0c;它能够记录并检查所有你的电脑和互联网之间的 HTTP 通讯。Fiddler 提供了电脑端、移动端的抓包、包括 http 协议和 https 协议都可以捕获到报文并进行分析&#xff1b;可以设置断点调试、截取…...

快速入手maven

文章目录 Maven介绍Maven安装和配置基于IDEA的Maven工程创建梳理Maven工程GAVP属性Idea构建Maven JavaSE工程Idea构建Maven JavaEE工程1. 手动创建2. 插件方式创建 Maven工程项目结构说明Maven核心功能依赖和构建管理依赖传递和冲突依赖导入失败场景和解决方案扩展构建管理和插…...

Mysql Binlog日志

Mysql Binlog是二进制格式的日志文件&#xff0c;但是不能把binlog文件等同于OS系统某目录下的具体文件&#xff0c;这是狭隘的。Binlog是用来记录Mysql内部对数据库的改动&#xff08;只记录对数据的修改操作&#xff09;&#xff0c;主要用于数据库的主从复制、数据同步以及增…...

高级深入--day45

官方站点&#xff1a;GitHub - rmax/scrapy-redis: Redis-based components for Scrapy. scrapy-redis的官方文档写的比较简洁&#xff0c;没有提及其运行原理&#xff0c;所以如果想全面的理解分布式爬虫的运行原理&#xff0c;还是得看scrapy-redis的源代码才行。 scrapy-r…...

shell_66.Linux修改或移除信号捕获

修改或移除信号捕获 要想在脚本中的不同位置进行不同的信号捕获处理&#xff0c;只需重新使用带有新选项的 trap 命令即可&#xff1a; $ cat trapmod.sh #!/bin/bash #Modifying a set trap # trap "echo Sorry...Ctrl-C is trapped." SIGINT # count1 whi…...

5 ip的分配

如上一节所述&#xff0c;需要和其他设备通信&#xff0c;那么需要先配置ip. 1、如何配置ip 1.可以使用 ifconfig&#xff0c;也可以使用 ip addr 2.设置好了以后&#xff0c;用这两个命令&#xff0c;将网卡 up 一下&#xff0c;就可以了 //---------------------------- 使…...

【Python机器学习】零基础掌握StackingClassifier集成学习

如何精确地预测花的种类?一个简单但强大的方法引入了! 在现实生活中,生物学家和园艺爱好者经常面临一个问题:如何准确地识别和分类不同种类的花?这不仅仅是一个纯粹的学术问题,也有实际应用,比如在植物育种、生态研究等方面。为 了解决这个问题,一种叫做堆叠分类(St…...

Spring Boot 常见面试题

目录 1.Spring Boot 快速入门什么是 Spring Boot&#xff1f;有什么优点&#xff1f;Spring Boot 与 Spring MVC 有什么区别&#xff1f;Spring 与 Spring Boot 有什么关系&#xff1f;✨什么是 Spring Boot Starters?Spring Boot 支持哪些内嵌 Servlet 容器&#xff1f;如何设…...

利用大语言模型(LLM )提高工作效率

日常工作就是面向 google/ 百度编程&#xff0c;除了给变量命名是手动输入&#xff0c;大多时候就是通过搜索引擎拷贝别人的代码&#xff0c;或者找到旧项目一段代码拷贝过来使用。这无疑是开发人员的真实写照&#xff1b;然而&#xff0c;通过搜索引擎搜索答案&#xff0c;无疑…...

[Linux打怪升级之路]-信号的产生

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、信号基础…...

Python教程---Python基础语法

1.程序中的几个基本概念 (1).表达式 表达式就是一个类似于数学公式的东西 比如:10 + 5 8 - 4 表达式一般仅仅用了计算一些结果,不会对程序产生实质性的影响 如果在交互模式中输入一个表达式,解释器会自动将表达式的结果输出 (2).语句 在程序中语句一般需要完成某种功能,…...

echarts 画散点图, x周,y周在指定位置标志一下

文章目录 echarts 画散点图&#xff0c; x周&#xff0c;y周在指定位置标志一下示例一例子二示例三 echarts 画散点图&#xff0c; x周&#xff0c;y周在指定位置标志一下 示例一 let scatterData {data: [[[-0.2, -0.6],[0.4, 0.3],[0.1, 0.4],[0.3, 0.5],[0.09, 0.1],[0.7,…...

Unity地面交互效果——3、曲面细分基础知识

大家好&#xff0c;我是阿赵。   之前介绍了使用动态法线贴图混合的方式模拟轨迹的凹凸感&#xff0c;这次来讲一下更真实的凹凸感制作。不过在说这个内容之前&#xff0c;这一篇先要介绍一下曲面细分着色器(Tessellation Shader)的用法。 一、为什么要做曲面细分 之前通过法…...

NOIP 赛前模拟总结(第一周)

10.24 虽然今天我过了一道题&#xff0c;成为了少数过了题的人&#xff0c;但是排名没有想象中那么高&#xff0c;充分说明了打暴力的重要性&#xff0c;有时候你拼正解可能还没有你打满暴力考得好。 一定要打满暴力&#xff01;一定要打满暴力&#xff01;一定要打满暴力&am…...

stm32 DMA

目录 简介 框图 DMA请求 DMA通道 DMA优先级 DMA 数据 外设到存储器 存储器到外设 存储器到存储器 传多少&#xff0c;单位是什么 传输完成 hal库代码 标准库代码 简介 CPU根据代码内容执行指令&#xff0c;这些众多指令中&#xff0c;有的用于计算、有的用于控制程…...

厦门万宾科技智能井盖监测仪器的作用如何?

越来越多的人们希望改善生活&#xff0c;走出农村走出大山&#xff0c;前往城市之中居住。由此城市的人口和车辆在不断增加&#xff0c;与之而来的是城市的交通压力越来越大&#xff0c;时常会出现道路安全隐患&#xff0c;这给城市未来发展和智慧城市建设都带来一定的难题&…...

【带头学C++】----- 三、指针章 ---- 3.5 字符串与指针

在 C 中&#xff0c;字符串可以通过指针来表示和操作。C 的字符串是由字符组成的字符数组&#xff0c;而指针则用于引用和操作内存中的数据。 1. 字符数组 1. 字符数组: 字符数组是最基本的字符串表示方式。可以使用字符数组来存储字符串&#xff0c;并使用指针来引用它。字符…...

二十三种设计模式全面解析-深入解析桥接模式:解锁软件设计的灵活性

在软件开发中&#xff0c;我们经常面临需要处理多个不同维度变化的情况。这些变化可能涉及多个维度的组合&#xff0c;导致类的爆炸性增长和难以维护的代码。在这种情况下&#xff0c;桥接模式&#xff08;Bridge Pattern&#xff09;是一种强大的设计模式&#xff0c;能够帮助…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

.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 适用场…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...

云安全与网络安全:核心区别与协同作用解析

在数字化转型的浪潮中&#xff0c;云安全与网络安全作为信息安全的两大支柱&#xff0c;常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异&#xff0c;并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全&#xff1a;聚焦于保…...

深度解析:etcd 在 Milvus 向量数据库中的关键作用

目录 &#x1f680; 深度解析&#xff1a;etcd 在 Milvus 向量数据库中的关键作用 &#x1f4a1; 什么是 etcd&#xff1f; &#x1f9e0; Milvus 架构简介 &#x1f4e6; etcd 在 Milvus 中的核心作用 &#x1f527; 实际工作流程示意 ⚠️ 如果 etcd 出现问题会怎样&am…...

ubuntu中安装conda的后遗症

缘由: 在编译rk3588的sdk时&#xff0c;遇到编译buildroot失败&#xff0c;提示如下&#xff1a; 提示缺失expect&#xff0c;但是实测相关工具是在的&#xff0c;如下显示&#xff1a; 然后查找借助各个ai工具&#xff0c;重新安装相关的工具&#xff0c;依然无解。 解决&am…...

精益数据分析(98/126):电商转化率优化与网站性能的底层逻辑

精益数据分析&#xff08;98/126&#xff09;&#xff1a;电商转化率优化与网站性能的底层逻辑 在电子商务领域&#xff0c;转化率与网站性能是决定商业成败的核心指标。今天&#xff0c;我们将深入解析不同类型电商平台的转化率基准&#xff0c;探讨页面加载速度对用户行为的…...