nodejs系列:40.koa之koa-multer中间件-上篇

215 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第15天,点击查看活动详情

系列介绍

该系列主要是介绍一些nodejs相关的基础知识,没有什么特别难的知识点,都是一些比较基础知识点。大家学习起来,也会比较容易理解和接收。

这些知识点,也是以前自己学习nodejs的时候,学习过的知识点。有些知识点,可能是由于学习的时间比较久了,也有可能是平时工作中用到的机会比较少,也差不多快把它们都忘记掉了。现在把它们都写下来,写成文章,一方面是记录下自己以前学习的nodejs知识点,一方面也是复习巩固自己以前学习的nodejs知识点。不要学着学着,就把以前的知识点都忘光了。

环境安装

实现之前,你首先需要安装nodejs环境。因为我们写的代码需要在node环境上运行,如果你没有,那么文件会运行不了。

以下是nodejs的安装地址,如果你没有安装的话,可以先把它安装上。安装了可以忽略这一步,跳到下面一步。

nodejs安装

前言

在前面几篇文章里nodejs系列:37-39篇文章,主要介绍了koa-parameter这个中间件。

在koa里面,我们如果想要对请求传递的参数做校验,要怎么做呢?使用koa-parameter这个中间件,就可以方便、快速地对请求的参数做校验了。

介绍完koa-parameter这个中间件,接下来,我们要介绍一下另外一个比较好用的中间件--koa-multer

koa-multer

koa-multer是一个Node.js里的中间件,用来处理multipart/form-data类型的表单数据。我们平时上传文件时,就要提交一个form-data格式的表单数据给到后端,如果直接用原生的nodejs来处理这些form-data数据,将要用大段的逻辑代码来处理。而使用了koa-multer这个中间件,就可以比较方便地处理form-data这些表单数据。

实现

本小节先实现前端的逻辑代码

创建文件

创建一个index.html文件,前端的代码逻辑要在这个文件里完成。

创建input
<input type="file" name="" id="file" />

创建一个上传文件的input,上传文件时需要使用这个表单项

定义一个函数

定义一个发送ajax请求的函数

function ajax({ url, data, method = "get" }) {
        let xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              console.log("请求成功");
            } else {
              console.log("请求失败");
            }
          }
        };
        xhr.send(data);
      }

创建一个XMLHttpRequest实例对象,用这个实例对象来发送ajax请求。

监听dom事件
 let iptDom = document.querySelector("#file");
      iptDom.addEventListener("change", function (e) {
        let files = e.target.files;
        console.log("files", files);
        let file = files[0];
        let form = new FormData();
        form.append("file", file);
​
        ajax({
          url: "http://localhost:3000/upload",
          data: form,
          method: "post",
        });
      });

获取input的dom对象,监听它的change事件。选择文件后,触发change事件,拿到选择的文件。创建一个formData对象,用它来存要上传文件。调用ajax函数,发送ajax请求,把文件传给后端服务器。

小结

本小结,主要介绍了koa的中间件--koa-multer,上传文件的时候,可以使用该中间件来处理。使用koa-multer中间件,可以让我们比较方便地处理上传的文件。

最后,放上自己比较喜欢的一句诗句:

千淘万漉虽辛苦,吹尽狂沙始到金 - 唐 刘禹锡《浪淘沙》