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

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"><spanclass="el-upload-list__item-preview"@click=