node express 建立文件上传服务器

最新推荐文章于 2025-01-16 21:07:02 发布

原创

最新推荐文章于 2025-01-16 21:07:02 发布 · 636 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何使用Node.js的Express框架配合前端WebUploader插件和formidable中间件建立文件上传服务。在服务器端，通过formidable处理文件上传，同时解决跨域问题，可以采用设置App.all全局处理或使用cors跨域中间件。

1 前端上传采用 webuploader 上传插件 http://fex.baidu.com/webuploader/getting-started.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>1</title>
		<link rel="stylesheet" href="webuploader-0.1.5/webuploader.css" />
		<script src="js/jquery.js"></script>
		<script src="webuploader-0.1.5/webuploader.js"></script>
		<style>
			#uploader { width: 1000px; height: 400px; border:1px solid black;}
			#uploader>div { width: 150px; height: 150px; border:1px solid black; float: left; }
			#uploader>div>div{ width: 100%; height: 100%;}
			#uploader>div>div img { width: 100%; padding: 0;margin:0;}
			#uploader>.img_0 { width: 300px; height: 300px; border:1px solid black;}
			.thumbnail { position: relative; }
			.thumbnail .error { color: #fff;  width: 100%; position: absolute; bottom: 0; background: cornflowerblue; text-align: center; }
		</style>
	</head>
	<body>
		<div id="filePicker">选择图片</div>
		<div id="uploader">
			<div class="img_0"></div>
			<div class="img_1"></div>
			<div class="img_2"></div>
			<div class="img_3"></div>
			<div class="img_4"></div>
		</div>
	</body>
	<script>
		// 初始化Web Uploader
		var uploader = WebUploader.create({
            dnd:'#uploader',//启用拖拽容器