携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第17天,点击查看活动详情
系列介绍
该系列主要是介绍一些nodejs相关的基础知识,没有什么特别难的知识点,都是一些比较基础知识点。大家学习起来,也会比较容易理解和接收。
这些知识点,也是以前自己学习nodejs的时候,学习过的知识点。有些知识点,可能是由于学习的时间比较久了,也有可能是平时工作中用到的机会比较少,也差不多快把它们都忘记掉了。现在把它们都写下来,写成文章,一方面是记录下自己以前学习的nodejs知识点,一方面也是复习巩固自己以前学习的nodejs知识点。不要学着学着,就把以前的知识点都忘光了。
环境安装
实现之前,你首先需要安装nodejs环境。因为我们写的代码需要在node环境上运行,如果你没有,那么文件会运行不了。
以下是nodejs的安装地址,如果你没有安装的话,可以先把它安装上。安装了可以忽略这一步,跳到下面一步。
前言
在上一篇文章里nodejs系列:41.koa之koa-multer中间件-中篇
,主要完善了后端服务器的逻辑代码。
前后端的逻辑代码,我们都写好了,接下来就要进行接口联调了,看下有没有问题。同时,看下使用koa-multer处理上传文件的效果怎么样。
koa-multer
koa-multer是一个Node.js里的中间件,用来处理multipart/form-data类型的表单数据。我们平时上传文件时,就要提交一个form-data格式的表单数据给到后端,如果直接用原生的nodejs来处理这些form-data数据,将要用大段的逻辑代码来处理。而使用了koa-multer这个中间件,就可以比较方便地处理form-data这些表单数据。
实现
启动服务
我们先在cmd里,用node运行index.js文件,启动node服务器。
选择文件
启动好node服务器后,我们运行index.html文件。运行好,我们在浏览器里,选择我们要上传的文件
文件选择好,触发input的change事件。在change事件的回调函数里,把上传文件放到formData里,发送ajax请求,把文件上传到node服务器。
这时我们切换到cmd里,我们在cmd里,可以看到node服务器报错了。
从报错信息里,我们可以看到,提示我们没有这个文件或者这个地址。前面,我们使用koa-multer中间件时,只是定义了上传文件要存储的位置。但是我们并没有创建这个目录,刚好现在就提示我们没有这个目录,接下来我们就要创建保存上传文件的目录。我们在工程文件下,创建一个我们使用koa-multer中间件时,定义的存储目录。
我定义的是public/upload
,我在工程目录下,创建一个public文件夹,里面再创建一个upload文件夹。
好了,保存上传文件的目录创建好了,我们重新启动node服务器。再到浏览器里,选择文件上传。
切换到cmd,此时cmd里没有报错信息了,同时把上传文件的信息打印出来了。
在没有上传文件之前,upload文件夹下是空的。
上传文件之后,upload文件夹下多了一张图片了。说明文件上传成功了。
我们返回到浏览器,看下接口的返回信息
接口的返回信息,提示文件上传成功,并且把上传文件的信息也返回了。
小结
本小节文章,主要是进行接口联调,看下是否有问题。遇到了一些小问题,没有创建保存上传文件的目录。把这个问题解决好了,上传文件成功了,并且保存到指定目录了。说明koa-multer这个中间件,可以比较方便地处理上传文件功能。
最后,放上自己比较喜欢的一句诗句:
千淘万漉虽辛苦,吹尽狂沙始到金 - 唐 刘禹锡《浪淘沙》