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