多文件上传 SpringBoot+SpringCloud

多文件上传

一 html页面设置

1 设置弹出样式

<style type="text/css">
	.bg{
		display:none;
		position:fixed;
		width:100%;
		height:100%;
		background: #000;
		z-index:2;
		top:0;
		left:0;
		opacity:0.3;
	}
	.content{
		display:none;
		width:305px;
		height:130px;
		background:#fff;
		z-index:3;
		position:fixed;
		left: 32%;
		top: 31%;
	}
</style>

2 页面设置 使用了bootstrap样式

<!-- 批量上传 start  multiple   支持多选 -->
<div class="bg" id="importFileBg"></div>
<div class="content" id="importFileContent">
	<div class="layui-layer-title" style="cursor: move;">导入文件</div>
	<span class="layui-layer-setwin"><a class="layui-layer-ico layui-layer-close layui-layer-close1" onclick="closeFileAllDiv"></a></span>
	<div id="uploadDiv" class="query-form" style="overflow: hidden;padding-right:5px;">
		<form id="uploadExcelFormAll" class="form-inline" method="POST" enctype="multipart/form-data">
			<div class="form-group upload-group">
				<input type="text" class="form-control" id="picValAll" value="" placeholder="（上传文件名称）" readonly>
				<button class="change-position file-icon"></button>
				<input type="file" class="file-btn change-position" name="fileAll" id="fileAll" multiple>
			</div>
		</form>
		<div class="layui-layer-btn layui-layer-btn-"><a href="javascript:void(0);" class="layui-layer-btn0" onclick="uploadfileAll" style="margin: 10px -14px;">上传</a></div>
	</div>
</div>
<!-- 批量上传 end -->

二 js设置

1 显示和关闭事件

// 展示
$("#importFileBg").fadeIn("fast");
$("#importFileContent").fadeIn("fast");
// 关闭事件
function closeFileAllDiv(){
	$('#importFileBg').fadeOut("fast");
	$('#importFileContent').fadeOut("fast");
}

2 上传回调事件

//文件上传事件
$("#fileAll").on("change",function(){
	var picValAll="";
	var fileAll = $("#fileAll")[0].files;

	for(var i=0;i<fileAll.length;i++){
		if(picValAll!=""){
			picValAll+=",";
		}
		picValAll+=`${fileAll[i].name}`;
		var suffix = `${fileAll[i].name}`.replace(/.+\./,"");
		if(suffix && suffix != "PDF" && suffix != "pdf"){
		 alert("只能上传PDF文件！");
		 return;
		}
		var maxSize = 10 * 1024 * 1024;//512KB
		var fileSize = fileAll[i].size;
		if(fileSize>maxSize){
			alert("文件最大为10M");
			return;
		}
	}
});

3 上传事件

function uploadfileAll(){
	var file = $("#picValAll").val();
	if(file == "" || file == null){
		alert('请选择文件！',"提示");
		return;
	}
	//上传到服务器
	var formData = new FormData($('#uploadFormAll')[0]);
	var fileAll = $("#fileAll")[0].files;
	for(var i=0;i<fileAll.length;i++){
		formData.append("fileAll",fileAll[i]);
		var suffix = fileAll[i].name.replace(/.+\./,"");
		if(suffix && suffix != "PDF" && suffix != "pdf"){
			alert("只能上传PDF文件！");
			return;
		}
	}
	$.ajax({
		type: 'post',
		url: baseURL + "test/saveAll",
		cache: false, processData: false, contentType: false, async: false,data: formData
	}).success(function (r) {
		if(r.code == 0){
			alert('操作成功', function(){
				vm.closeFileAllDiv();
			});
		}else{
			alert(r.msg);
		}
	}).error(function () {
		alert("上传失败，请重新上传！","提示");
	});
}

二 java设置

@PostMapping("/saveAll")
public Result saveAll(@RequestParam Map<String,String> map,HttpServletRequest request){
	logger.error("进入上传附件");
	
	//上传的文件服务的地址  其实是一个存储文件的tomcat服务  也可以是其他的
	String supplierUrl = "http://127.0.0.1:8081/test/"
	List<MultipartFile> files = new ArrayList<MultipartFile>();
	MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; 
	// 获取文件列表
	files = multipartRequest.getFiles("fileAll");
	for (MultipartFile multipartFile : files) {
		//上传图片/预览图片
		String upload_url ;
		try {
			// 获取文件大小
			byte[] bytes = file.getBytes();
			// 文件后缀
			String fileNameSuffix = "";
			if(map.get("fileName") != null){
				String fileName =multipartFile.getOriginalFilename();
				fileNameSuffix = fileName.substring(fileName.lastIndexOf("."), fileName.length());
			}
			// 生成新的文件名   日期加上几位随机数
			String fileName = DateUtils.fotmatDateToFull(new Date()) +(int)((Math.random()*9+1)*1000000)+fileNameSuffix;
			StringBuffer sb = new StringBuffer(supplierUrl);
			sb.append(fileName);
			
			logger.error("文件上传路径="+sb.toString());
			Client client = Client.create();
			//上传文件
			WebResource resource = client.resource(sb.toString());
			resource.put(bytes);
			
			logger.error("保存信息完成");
		} catch (IOException e) {
			e.printStackTrace();
			return Result.error("上传失败，请选择文件");
		}
	}
	return Result.ok();
}

总结注意事项

如果上传的文件名中文乱码问题
使用的框架是SpringBoot
在服务网关里面配置最下面加上如下代码

zuul.servlet-path=/