node使用multer进行文件上传

开场白

在平时的业务中，我们很多使用都会有文件上传这个功能。
今天分享一下使用 node+element-ui实现一下文件上传。
请个人大佬指点一番~~~。批评的时候稍微轻一点。
毕竟我心里承受能力弱地一批，一不高兴就喜欢....

使用 element-ui库el-upload组件fil类型上传

前端上传文件的时候，我们通常file对象。
较小的图片的当然也可以使用base64的方式进行上传。
等会我们将会将file转化为base64。
file对象传参的时候是这样的 file:file(二进制对象)
并且'Content-type': 'multipart/form-data'
下面我们使用 element-ui 的el-upload 组件进行文件上传.
我们会使用 http-request 自定义事件覆盖原来的事件。
请看下面的代码

<template>
  <div>
    <h2>文件上传</h2>
    <el-upload class="upload-demo" action="https"
       :http-request="uploadFile">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  methods: {
    uploadFile(file) {
      console.log('file对象', file)
      axios.post('http://127.0.0.1:666/upload/upload',
        {
          file:file
        },  {
            'Content-type': 'multipart/form-data'
          }
      ).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });
    }
  }
}
</script>

写过很多文件上传的的小伙伴。
你们觉得可以上传成功吗？
会是file:file(二进制)对象吗？
凭借自己的感觉想一分钟，然后下滑

为什么传参的是 file:{...},而不是file:file(二进制)

有的小伙伴会说 你传的时候不应该是file,应该是file.file
因为从你刚刚的截图来看应该是：file.file才是我们需要的。
感觉说的有道理，我们尝试一下。

使用FormData来解决这个问题

FormData是XMLHttpRequest提供的一个接口对象，
用以将数据编译成键值对，以便于XMLHttpRequest来发送数据。
创建一个 FormData对象，并添加属性。
FormData 可以通过 append(key, value)来添加数据。
上面说了 FormData的简单介绍。
并没有说为啥FormData可以使用解决这个这个问题？
那为什么FormData可以解决这个问题了？
因为：
File 接口基于 Blob，继承 blob 功能并将其扩展为支持用户系统上的文件。
你可以通过 Blob() 构造函数创建一个 Blob 对象。
而 FormData 对象附加 File 或 Blob 类型的文件，所以我们可以添加。

<script>
import axios from 'axios'
export default {
  methods: {
    uploadFile(file) {
      let formdata = new FormData();
      console.log(file);
      formdata.append("file", file.file);
      axios.post('http://127.0.0.1:666/upload/upload',
        formdata,  {
            'Content-type': 'multipart/form-data'
          }
      ).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });
    }
  }
}
</script>

将file转为base64

<template>
  <div>
    <!-- accept 接收图片格式 -->
    <input type="file" title="" ref="inputRef"
    accept=".jpeg,.png, .gif,.jpg" @change="Upload">
  </div>
</template>
<script>
import axios from 'axios'
export default {
  methods: {
    // 文件上传被触发
    Upload(event) {
      const flie = event.target.files[0]; //直接获取的就是file对象
      this.fileChangeBase64(flie).then(backres => {
        console.log('base64', backres)
        // 上传成功后的处理,清除input中value值，否则只相同文件只能够上传一次
        // this.$refs.inputRef.value = ""; 在合适的时候使用
      }).catch(err => {
        console.log('err', err )
      })
    },
    // 将file对象转化为base64
    fileChangeBase64(file) {
      return new Promise((resolve, reject) => {
        //FileReader类就是专门用来读文件的，我们现在创建一个
        const reader = new FileReader()
        // 它的本质就是图片的二进制数据， 进行base64加密后形成的一个字符串.
        reader.readAsDataURL(file)
        // 成功返回对应的信息，reader.result一个base64
        reader.onload = () => resolve(reader.result)
        // 失败返回失败的信息
        reader.onerror = error => reject(error)
      })
    }
  }
}
</script>

需要注意的一点，我这里是将file转为base64哈。
base64将不会不能被multer处理的哈~或者说不能够处理

node中间件 multer 的简单介绍

前端代码已经写好了，现在我们开始写后端的代码，后端我们使用node+express
multer 是一个 node.js 中间件。
它用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件。
需要注意的是: multer 不会处理任何非 multipart/form-data 类型的表单数据。
换一句换说：前端必须这样设置类型 'Content-type': 'multipart/form-data'

guthub官方解释链接
https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md

下载 multer

前端代码写好了，现在我们开始借助node来实现后端的代码
我们使用 multer 来进行文件传
第一步:先下载 multer 模块
npm i express multer -S
我下载的时候是1.4.5版本

fileupload.js文件

// 引入express
var express = require('express')
//添加路由模块
var router = express.Router()
// 文件上传需要的模块
var multer=require('multer')
// 配置路径和文件名
var storage = multer.diskStorage({
  //上传文件到服务器的存储位置
  destination: 'public/upload',
  filename: function (req, file, callback) {
    //上传的文件信息
    console.log('file', file)
    /**
     * file {
        fieldname: 'file',
        originalname: 'JRMW5Y~E5B%UO4$EZ)[)XLR.png',
        encoding: '7bit',
        mimetype: 'image/png'
      }
    */
    // 将字符串分割成为数组，以点.的形式进行分割。返回的是一个数组
    var fileFormat = (file.originalname).split('.')
    // 获取时间戳
    var filename = new Date().getTime()
    // 文件的命名为：时间戳 + 点 + 文件的后缀名
    callback(null, filename + "." + fileFormat[fileFormat.length-1])
  }
})
var upload = multer({
  storage
})
router.post('/upload', upload.single('file'), (req, res) => {
  res.send({ code:'0', msg:'上传成功'})
})
module.exports = router;

app.js 引入注册路由

// 引入
var uploadRouter = require('./routes/fileupload');
// ... 其他代码....
//注册接口前缀/upload
app.use('/upload', uploadRouter);

//这个时候接口就是 /upload/upload

需要注意的点

1. 需要注意的点：upload.single('key') 必须要与前端中
formData.append("file", flie)key键名保持一致。

2. 为什么不直接使用前端传递传来的名称？
因为有可能名称会重复，这样不好。

3. 因为前端上传文件的时候使用change事件进行监听的。
注意在合适的时候清除它的value值，否者上传相同的文件change事件不会被触发