使用Element-UI的Upload组件加Node.js实现多图片上传

在我们完成项目的过程中，遇到需要文件上传的需求很正常，
作为一名前端小白，我在完成我的一个个人项目的时候，也遇到了需要完成图片上传的需求。
我前端使用的是vue，使用的组件是Element-UI，我们现在就来看看代码吧。

页面代码

<el-upload id="upload" ref="upload" 
      multiple 
      action="api/upload" 
      list-type="picture-card" 
      :http-request="uploadFile"
      :auto-upload="false" 
      :file-list="this.fileList" >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
            <i class="el-icon-zoom-in"></i>
          </span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
    <el-button @click="finish">默认按钮</el-button>

js代码

<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      fileSizeIsSatisfy:false,
      fileList:[],
      text:'',
      formData:[]
    };
  },
  methods: {
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    finish: function () {
      this.fileData = new FormData();
      this.$refs.upload.submit();
      this.$axios.post("api/upload",this.fileData).then(res=>{
        console.log(res)
			});
    },
    uploadFile:function(file){
      this.fileData.append('file', file.file);
    },
  },
  mounted() {}
};
</script>

后台的使用的是Node.js的Express框架搭建的
主要代码：

var express = require('express');
var router = express.Router();
const multer = require('multer')
const fs =require('fs')

/* GET home page. */
router.post('/', multer({
  dest:'uploads'
}).array('file',10),(req,res)=>{
  console.log(req.files)
  const files = req.files;
  const fileList = [];
  for(var i in files){
    var file = files[i];
    fs.renameSync(file.path,`uploads/${file.originalname}`);
    file.path = ` uploads/${file.originalname}`;
    fileList.push(file)
  }
  console.log(fileList);
  res.send(fileList)
}
);

module.exports = router;

上面使用到的模块有multer 以及 fs
multer 需要安装：
Multer是nodejs中处理multipart/form-data数据格式(主要用在上传功能中）的中间件。

npm install --save multer

fs模块是Node.js自带的模块，可以不需要下载。