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

电玩女神 2022-10-07 11:56 167阅读 0赞

![20e030cde5b98ca309d9fca565c2e10d.png][]

## 一、是什么 ##

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

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

对于文件上传，我们需要设置请求头为`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

\--The End--

系列正在更新：12/14

点击下方卡片解锁更多

![9ce4e2d56df45a1f02109a9c1aa0a700.png][]

创作不易，星标、点赞、在看 三连支持

[20e030cde5b98ca309d9fca565c2e10d.png]: /images/20221005/3d055e30a3854c7aa67125352b913bbd.png
[9ce4e2d56df45a1f02109a9c1aa0a700.png]: /images/20221005/858ba364c9814e258e97d27ace279e52.png