springboot框架下的上传下载

项目接触到新的框架技术：springboot+angularjs+bootstrap 其中稍微有点难度的就属于上传下载了

1，上传文件

前端样式如上所示，点击"导入模板文件"，浏览选择文件，点击“导入”则上传文件信息到服务器，当上传成功后，在右侧显示文件名，并且提供下载功能。

上传样式

	

			

				

					
厂商模板文件
					

						

							

								

								  导入模板文件
									
									导入
									

								        {{file.relativePath}} ({{file.size}}bytes)
								        

								            

								        {{file.progress()}}% Complete
							            
							        
							    
							    
							
								
							
							

								

							    	点击下载文件
							    
							
						
					
				
			
		

这个控件在初始化的时候flow-init=“addFlowInitObjModel”，去加载请求路径

 // 上传模板文件
    $scope.addFlowInitObjModel = {    	
            target: '/deviceType/importFile',
            //target: '/deviceType/importFile',
            chunkSize: 1 * 1024 * 1024,
            simultaneousUploads: 1,
            throttleProgressCallbacks: 1,
            testChunks: false,
            singleFile: true
        };

之后点击上传的时候会发送到后台请求：ng-click="$flow.upload()"

angularjs提供了上传之后成功之后的操作函数：flow-file-success="uploadSuccess( $file, $message, $flow )"

$file ：上传的文件，可以获得该文件的大小（$file.size），文件名($file.name)等文件相关的参数

$message ：后台返回的数据信息（在这里需要用到后台返回的上传文件的路径信息，只要后台return 路径，前端就可以使用$message，至于flow没用到）

后台处理的方法就是，读取文件流，然后将流写入到文件中就行，最后保存文件到指定的地方。

/**
	 * 上传模板文件并解析保存到本地
	 * @throws IOException 
	 * @throws NoSuchPaddingException 
	 * @throws NoSuchAlgorithmException 
	 */
	@RequestMapping(value="/importFile",method=RequestMethod.POST)
	public String importLicense(MultipartHttpServletRequest req) throws Exception{
		try{
			//long modelId = Long.parseLong(req.getParameter("id"));
			// 读取流
			StringBuffer strBuff = new StringBuffer();
			InputStream in = req.getFile("file").getInputStream();		
			Reader in2 = new InputStreamReader(in);
			BufferedReader reader = new BufferedReader(in2);
			String line = null;
			while ((line = reader.readLine()) != null) {
				strBuff.append(line);
			}	
			String ldbstr = strBuff.toString();
			in.close();
			System.out.println(ldbstr);
			
			// 创建文件保存路径
			File file =new File(FILE_PATH);  
			//如果文件夹不存在则创建  
			if  (!file .exists()  && !file .isDirectory())    
			{     
			    System.out.println("//不存在");
			    file .mkdir();  
			} else 
			{
			    System.out.println("//目录存在");
			}
			String filePath = FILE_PATH+"\\2.xml";
		    File fileName=new File(filePath);  
		    if(!file.exists())   {  
		    	fileName.createNewFile();  
		    }  
		    // 写入到文件中
		    OutputStream os = new FileOutputStream(fileName);  
            os.write(ldbstr.getBytes());  
            os.flush();  
            os.close();  
                        
            // 修改数据库中版本类型对应的模板文件地址
//            DeviceType type =  deviceTypeService.findOne(id);            
//            type.setTemplateFilePath(filePath);
//            deviceTypeService.update(type);
			return filePath;		
		}catch(Exception e){
			e.printStackTrace();
			return "";
		}
		
	}

由于需要路径参数，就需要返回到前端进行数据绑定（如果你只需要上传，则不需要）

 // 模板文件上传成功之后，返回文件路径，将路径保存到数据库中,同时显示上传文件名称，提供下载链接
    $scope.uploadSuccess = function ($file, $message, $flow){
    	var deviceType = $scope.deviceTypeManager.currentDeviceType;
    	deviceType.templateFilePath = $message;
    	deviceType.put();    	
    	document.getElementById("filename").innerHTML = $file.name;//制定位置显示文件名称
    }

2，文件下载

下载比较简单，只要有路径就行。同样需要读流，然后write到前端就行，在这里使用了iframe来处理下载

// 上传模板文件下载
    $scope.downloadFile = function (){
    	var typeId = $scope.deviceTypeManager.currentDeviceType.id;
    	//$scope.deviceTypeManager.currentDeviceType.get("/deviceType/downloadmcode?id="+typeId);
    	//target: '/versionFile/downloadmcode?id = '+ typeId;
//    	$http.get('/deviceType/downloadmcode', {
//    	    params: { id: typeId }
//    	});
    	
    	var frame = $("