VUE+node+element 实现文件批量上传

最新推荐文章于 2024-09-06 00:37:25 发布

qq_26330543

最新推荐文章于 2024-09-06 00:37:25 发布

阅读量253

点赞数

文章标签： vue nodejs javascript

本文链接：https://blog.youkuaiyun.com/qq_26330543/article/details/117299389

版权

本文介绍了如何使用HTML的el-upload组件配合multer模块实现文件上传，同时展示了如何在Express后端设置上传接口并进行文件处理。涉及了MVC架构中的前端模板和后端路由交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML编写

<template>
	<!-- action 定义请求地址 -->
	<!-- :name="theName"  定义node上传模块multer的 single('a')-->
	<div class="file">	
		<el-upload  class="upload-demo" drag action="http://localhost:8000/importFile" multiple ref="upload" :name="theName"
		  :on-preview="handlePreview" :before-remove="beforeRemove" :on-remove="handleRemove">
		  <i class="el-icon-upload"></i>
		  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
		</el-upload>
	</div>
</template>

<script>
	export default{
		name:"fileImport",
		data(){
			return{
				fileList: [], // // 上传文件列表
				upFileList: [], // 文件File列表 上传参数,
				theName:'a'
			}
		},
		methods:{
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
			  console.log(file);
			},
			beforeRemove(file, fileList) {
			  return this.$confirm(`确定移除 ${ file.name }？`);
			}
		}
	}
</script>

<style scoped="scoped">
	
</style>

搭建express服务

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const base = require('./oracle_connect.js');

//解决跨域问题
app.use(require('cors')());
//挂载内置中间件
app.use(express.static('public'));
//挂载参数处理中间件(post)
//app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser());
//处理json数据(get)
app.use(bodyParser.json())
//引用封装的login模块，并且执行传参（因为login导出的是个带参数的函数，所以这里可以执行传参）
require('./server/get_title.js')(app);
require('./server/importFile.js')(app);

app.listen(8000,()=>{
	console.log('http://localhost:8000/')
});

使用multer 模块上传文档

module.exports = (app) => {
	//const fs = require('fs');
	//const path = require('path');
	const multer = require('multer')
	
	const storage = multer.diskStorage({
	  destination(req,res,cb){
	    cb(null,'D:\\king_sofft');//上传的地址
	  },
	  filename(req,file,cb){
	    const filenameArr = file.originalname.split('.');
			console.log(filenameArr)
	    cb(null,Date.now() + '-' + filenameArr[0] + '.' + filenameArr[1]);//定义上传文件的名称
	  }
	});
	
	let upload = multer({storage}).single('a'); //处理formdata数据中name为a的文件
	
	app.post('/importFile',(req,res) => {
		 // req.file.filename = req.originalname;
		 upload(req, res, function (err) {
		   if (err) {
		     console.log(req.body);   //打印请求体
		     console.log(req.file); 
				 console.log(err)
		     return
		   }else{
				console.log(req.file)
			 }
		})
		res.send("success")
	})
}