面试官:如何实现文件上传?说说你的思路

一、是什么

文件上传在日常开发中应用很广泛,我们发微博、发微信朋友圈都会用到了图片上传功能

因为浏览器限制,浏览器不能直接操作文件系统的,需要通过浏览器所暴露出来的统一接口,由用户主动授权发起来访问文件动作,然后读取文件内容进指定内存里,最后执行提交请求操作,将内存里的文件内容数据上传到服务端,服务端解析前端传来的数据信息后存入文件里

对于文件上传,我们需要设置请求头为content-type:multipart/form-data

multipart互联网上的混合资源,就是资源由多种元素组成,form-data表示可以使用HTML Forms 和 POST 方法上传文件

结构如下:

POST /t2/upload.do HTTP/1.1
User-Agent: SOHUWapRebot
Accept-Language: zh-cn,zh;q=0.5
Accept-Charset: GBK,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Content-Length: 60408
Content-Type:multipart/form-data; boundary=ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC
Host: w.sohu.com

--ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC
Content-Disposition: form-data; name="city"

Santa colo
--ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC
Content-Disposition: form-data;name="desc"
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
 
...
--ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC
Content-Disposition: form-data;name="pic"; filename="photo.jpg"
Content-Type: application/octet-stream
Content-Transfer-Encoding: binary
 
... binary data of the jpg ...
--ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC--

boundary表示分隔符,如果要上传多个表单项,就要使用boundary分割,每个表单项由———XXX开始,以———XXX结尾

而xxx是即时生成的字符串,用以确保整个分隔符不会在文件或表单项的内容中出现

每个表单项必须包含一个 Content-Disposition 头,其他的头信息则为可选项, 比如 Content-Type

Content-Disposition 包含了 type和 一个名字为name的 parameter,type 是 form-data,name参数的值则为表单控件(也即 field)的名字,如果是文件,那么还有一个 filename参数,值就是文件名

Content-Disposition: form-data; name="user"; filename="logo.png"

至于使用multipart/form-data,是因为文件是以二进制的形式存在,其作用是专门用于传输大型二进制数据,效率高

二、如何实现

关于文件的上传的上传,我们可以分成两步骤:

  • 文件的上传
  • 文件的解析

文件上传

传统前端文件上传的表单结构如下:

<form action="http://localhost:8080/api/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file" value="" multiple="multiple" />
    <input type="submit" value="提交"/>
</form>

action 就是我们的提交到的接口,enctype="multipart/form-data" 就是指定上传文件格式,input 的 name 属性一定要等于file

文件解析

在服务器中,这里采用koa2中间件的形式解析上传的文件数据,分别有下面两种形式:

  • koa-body
  • koa-multer
koa-body

安装依赖

npm install koa-body

引入koa-body中间件

const koaBody = require('koa-body');
app.use(koaBody({
    multipart: true,
    formidable: {
        maxFileSize: 200*1024*1024    // 设置上传文件大小最大限制,默认2M
    }
}));

获取上传的文件

const file = ctx.request.files.file; // 获取上传文件

获取文件数据后,可以通过fs模块将文件保存到指定目录

router.post('/uploadfile', async (ctx, next) => {
  // 上传单个文件
  const file = ctx.request.files.file; // 获取上传文件
  // 创建可读流
  const reader = fs.createReadStream(file.path);
  let filePath = path.join(__dirname, 'public/upload/') + `/${file.name}`;
  // 创建可写流
  const upStream = fs.createWriteStream(filePath);
  // 可读流通过管道写入可写流
  reader.pipe(upStream);
  return ctx.body = "上传成功!";
});

koa-multer

安装依赖:

npm install koa-multer

使用 multer 中间件实现文件上传

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "./upload/")
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + path.extname(file.originalname))
  }
})

const upload = multer({
  storage
});

const fileRouter = new Router();

fileRouter.post("/upload", upload.single('file'), (ctx, next) => {
  console.log(ctx.req.file); // 获取文件
})

app.use(fileRouter.routes());

参考文献

  • https://segmentfault.com/a/1190000037411957
  • https://www.jianshu.com/p/29e38bcc8a1d

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/584234.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

电商技术揭秘三十五:智能风控功能架构浅析

相关系列文章 电商技术揭秘相关系列文章合集&#xff08;1&#xff09; 电商技术揭秘相关系列文章合集&#xff08;2&#xff09; 电商技术揭秘二十八&#xff1a;安全与合规性保障 电商技术揭秘二十九&#xff1a;电商法律合规浅析 电商技术揭秘三十&#xff1a;知识产权保…

Elasticsearch中对文章进行索引和查重

解决思路 要在Elasticsearch中对文章进行索引和查重&#xff0c;可以按照以下步骤操作&#xff1a; 安装Elasticsearch并启动服务。 安装Python的Elasticsearch客户端库&#xff0c;可以使用pip install elasticsearch命令进行安装。 编写Python代码&#xff0c;使用Elastic…

【Elasticsearch】安装配置与使用

1 前期准备 1.1 环境准备 麒麟ARM 64位操作系统 1.2 安装包准备 Elasticsearch下载地址: https://www.elastic.co/cn/downloads/elasticsearch 2 部署elasticsearch 2.1 创建es专用用户 注意&#xff1a;ES不能使用root用户来启动&#xff0c;必须使用普通用户来安装启…

QT爱发函,介绍一下平替QT的八大桌面开发框架。

Qt是一款跨平台的C应用程序开发框架&#xff0c;它提供了丰富的库和工具&#xff0c;可以用于开发图形用户界面、嵌入式系统、移动应用等。Qt拥有商业版和开源版两种许可证&#xff0c;商业版需要支付授权费用&#xff0c;而开源版则可以免费使用。 对于替代Qt的框架&#xff0…

STM32使用PWM驱动直流电机

系列文章目录 STM32单片机系列专栏 C语言术语和结构总结专栏 文章目录 1. 直流电机和驱动简介 2. 驱动电路原理 3. 代码实现 3.1 PWM.c 3.2 PWM.h 3.3 MOTOR.c 3.4 MOTOR.h 3.5 main.c 3.6 完整工程文件 PWM和OC输出比较详解&#xff1a; STM32定时器的OC比较和PW…

2024.4.23 LoadRunner 测试工具详解 —— VUG

目录 引言 LoadRunner 三大组件之间的关系 LoadRunner 脚本录制 启动并访问 WebTours 脚本录制 编译 运行&#xff08;回放&#xff09; LoadRunner 脚本加强 事务插入 插入集合点 插入检查点 参数化 ​编辑 打印日志 引言 问题&#xff1a; 此处为啥选择使用 Lo…

西门子:HMI小游戏-灰太狼与喜羊羊

DB块&#xff1a; HMI界面&#xff1a; 实际视频&#xff1a; 抓羊小游戏

第三节课,功能2:开发后端用户的管理接口5min(用户的查询/状态更改)【4】

一、代码任务 【录个屏】 二、写代码 2.1 代码文件位置 2.2 代码如下&#xff1a; 2.3 官方文档&#xff1a; 网址&#xff1a; 逻辑删除 | MyBatis-Plus (baomidou.com) 三、代码有bug&#xff0c;没有鉴权&#xff0c;表里添加一个字段。role 管理员 3.1 判断操作的人&am…

SQL事前巡检插件

背景: 事故频发 •在工作过程中每年都会看到SQL问题引发的线上问题&#xff0c;一条有问题的SQL足以拖垮整个数据库 不易发觉 •对于SQL性能问题测试在预发环境不易发现&#xff08;数据量小&#xff09; •SAAS系统隔离字段在SQL条件中遗漏&#xff0c;造成越权风险 •业…

C语言:文件操作(中)

片头 嗨&#xff01;小伙伴们&#xff0c;大家好&#xff01;在上一篇中&#xff0c;我们学习了C语言&#xff1a;文件操作&#xff08;上&#xff09;&#xff0c;在这一篇中&#xff0c;我们将继续学习文件操作&#xff0c;准备好了吗&#xff1f;Ready Go ! ! ! 文件的顺序…

通过window的bash创建vue架构的项目文件,如何不用下载即可引用想要的图片

winr 通过window的bash创建vue架构的项目文件 先创建项目文件 用vscode打开并下载依赖 关于安装包版本小知识补充 例如 “^5.2.0”第一位是大版本号&#xff0c;第二位是小版本号&#xff0c;最后一位是补丁号 “^”尖括号指限定了只能下载大版本号为5的版本 “~4.17.21” …

ssm092基于Tomcat技术的车库智能管理平台+jsp

车库智能管理平台设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本车库智能管理平台就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短…

[机器学习系列]深入解析K-Means聚类算法:理论、实践与优化

目录 一、KMeans (一)Kmeans简介 (二)Kmeans作用和优点 (三)Kmeans局限和缺点 (四)Kmeans步骤 (五)如何选取最佳的K值的三种方法 (六)手肘法和目标函数的变化两种确定K值方法的区别 (七)如何选取第一次迭代的K个类中心------KMeans方法 (八)KMeans的常用参数介绍 二、…

CSS + HTML

目录 一.CSS&#xff08;层叠样式表&#xff09; 二. CSS 引入方式 三.选择器 3.1 标签选择器 3.2 类选择器 3.3 id选择器 3.4 通配符选择器 3.5 画盒子 四.文字控制属性 4.1字体大小 4.2字体粗细 4.3 字体倾斜 4.4行高 4.5行高--垂直居中 4.6 字体族 4.7 字体复…

智能优化算法及 MATLAB 实现(书籍推荐)

智能优化算法及 MATLAB 实现&#xff08;书籍推荐&#xff09; 介绍前言目录第1章 粒子群优化算法原理及其MATLAB实现第2章 哈里斯鹰优化算法原理及其MATLAB实现第3章 沙丘猫群优化算法原理及其MATLAB实现第4章 鲸鱼优化算法原理及其MATLAB实现第5章 大猩猩部队优化算法原理及其…

算法设计与分析 3.2 牛顿法及改进、迭代法、矩阵谱半径、雅可比迭代、高斯迭代

思考题1 改进cosx&#xff1f;优化算法 关键点在于cos计算过于麻烦&#xff0c;而每次都要求sinx的值 故直接简化为cosx的导数 -sinx 即&#xff1a; 原&#xff1a;//double daoshu(double x) { // return 18 * x - cos(x); //} 改&#xff1a;double daoshu(double x) {retu…

数字旅游打造个性化旅程,科技让旅行更贴心:数字技术根据旅行者需求定制专属行程,让每一次旅行都充满惊喜与贴心服务

一、引言 随着科技的飞速发展和数字化转型的深入推进&#xff0c;数字旅游正逐渐成为现代旅行的新趋势。它借助数字技术&#xff0c;根据旅行者的个性化需求&#xff0c;为其量身打造专属的旅程&#xff0c;让每一次旅行都充满惊喜与贴心服务。数字旅游不仅提升了旅行的便捷性…

如何编写测试用例

总结 测试用例需求来源 文档 用户角度 编写测试用例步骤 分析需求 写测试点 对需求的拆分 辅助完成测试用例的编写 编写测试用例 编写测试用例原则 能看懂 能执行 测试结果状…

【STM32 IIC通信与温湿度传感器AHT20(I2C_AHT20)】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 最终效果展示AHT20温湿度传感器&#xff08;I2C_AHT20&#xff09; 1、工程配置2、代码如果您发现文章有错误请与我留言&#xff0c;感谢 最终效果展示 详细讲解视频…

Excel 批量获取sheet页名称,并创建超链接指向对应sheet页

参考资料 用GET.WORKBOOK函数实现excel批量生成带超链接目录且自动更新 目录 一. 需求二. 名称管理器 → 自定义获取sheet页名称函数三. 配合Index函数&#xff0c;获取所有的sheet页名称四. 添加超链接&#xff0c;指向对应的sheet页 一. 需求 ⏹有如下Excel表&#xff0c;需…