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的用法