vuejs el-upload 支持拖拽 多文件上传

<template>
    <div>
      <el-upload multiple class="upload-demo" name='uploadfile' ref="upload" drag accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        :action='uploadUrl()' :file-list="uploadList" :auto-upload="false">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传excel文件，且不超过10m</div>
      </el-upload>
      <el-button @click="upload" type="primary" id='btnUpload'>upload</el-button>
      <el-button @click="onClickCancelHandler" type="primary">cancel</el-button>
    </div>
</template>
<script>
  import {
    RES
  } from '../data/staticVal.js'
  import {
    mapGetters
  } from 'vuex'
  var uploadFiles = {
    name: "uploadFiles",
    computed: {
      ...mapGetters({
        username: 'name'
      })
    },
    data: function () {
      return {
        uploadFile: null,
        uploadFilename: '',
        fileList: [],
        uploadList: [],
        excelList: [],
        visible: true,
        noFile: true
      }
    },
    methods: {
      mounted() {
      },
      upload() {
        this.fileList = this.$refs.upload.uploadFiles;
        if (this.fileList.length > 0) {
          this.$refs.upload.submit();
          console.log(this.fileList);
          this.$emit('closeUploadDailog');
        } else {
          this.$message({
            message: 'no file import',
            type: 'info'
          });
          return false;
        }
      }
    }
  }
  export default uploadFiles;
</script>
<style>
  #btnUpload {
    margin: 10px
  }
</style>

let multer = require('multer');
let co = require('co');
let fs = require('fs');
let xlsx = require('xlsx');
let storage = multer.diskStorage({
    destination: function (req, file, cb) {cb(null, './uploads');},

    filename: function (req, file, cb) {
        const fileName = Date.now() + '$' + file.originalname;
        currentFile.push(fileName);
        cb(null, fileName);
    }
});

let upload = multer({
    storage: storage,
    limits: {
        fieldSize: '10M'
    }
});

exports.storageFile = function (req, res, next) {
    s = upload.single('uploadfile');
    s(req, res, err => {
        if (err) {
            return console.log(err);
        }
        next();
    })
}

exports.insertFileInfoDB = function (req, res) {
    co(function* () {
        try {
            let fileName = req.file.filename;
            let originalname = req.file.originalname;
            let path = req.file.destination + '/' + fileName;
        } catch (error) {
            res.send({
                result: RES.FAIL,
                message: error
            });
        }
    })
}

前台和后台的代码(上面)

 

router.post('/api/uploadFiles', uploadMonitoring_api.storageFile, uploadMonitoring_api.insertFileInfoDB) //action 里面的接口

注意：

exports.storageFile = function (req, res, next) {
    s = upload.single('uploadfile');
    s(req, res, err => {
        if (err) {
            return console.log(err);
        }
        next();
    })
}  //uploadfile 要和前台的el-uplaod 里面的name相同 multer的用法