Multer 实现文件上传功能

前言：

  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
1

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">
                    <span
                        class="el-upload-list__item-preview"
                        @click
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16