前端上传文件到HDFS

通过form表单上传文件到HDFS


公司项目有个需求是直接从前端页面上传文件到HDFS中,前端是form表单定义了hadoop连接、HDFS存储路径、上传文件等信息,目标是在用户填写完信息以后,文件带表单一块提交到后台。
实现思路:前端提交时,将文件跟表单数据一块提交到后台,后台通过MultipartFile和实体对象接收数据,读取MultipartFile中的文件,获取InputStream流,然后建立hadoop连接,根据定义好的存储路径,创建FSDataOutputStream流,将InputStream写入完成。

前端代码

省略了一些不重要内容

<form class="form-horizontal m" id="form-job-add" enctype="multipart/form-data">
....
	<input type="file" id="filePath"  name="filePath"></span>
...
</form>
 function submitHandler(index,layero) {
    if ($.validate.form()) {
    	uploadFile(index);
    }
 }
 function uploadFile(index){
           	var formData = new FormData();
           	if ($('#filePath')[0].files[0] == null) {
                $.modal.alertWarning("请先选择文件路径");
                return false;
            }          
            formData.append('jobmc', $("#jobmc").val());       
        	formData.append('fileName', $("#fileName").val());
        	formData.append('file', $('#filePath')[0].files[0]);
            $.ajax({
                url: prefix + "/addUttDataLocalFile",
                type: 'post',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function(result) {
                	if(result.code==0){
                		alert('传输完成');
                		parent.layer.close(index);
                	}
                }
            });            
        }

后台代码

 public AjaxResult addUttDataSaveLocalFile(@RequestParam("file") MultipartFile file, TInfoUttdata tInfoUttdata)
    {
    	Map<String,Object> result = new HashMap<String,Object>();
    	if (StringUtils.isNotBlank(file.getOriginalFilename()) || null==tInfoUttdata) {
    		result = tInfoUttdataService.executeUploadFile(file,tInfoUttdata);
    		return AjaxResult.success("传输完成", result);
    	}else {
    		return AjaxResult.error("传输出错", result);
    	}
    }

	public Map<String, Object> executeUploadFile(MultipartFile file,TInfoUttdata tInfoUttdata) {
		FileSystem fs = null;
		InputStream is = null;
		FSDataOutputStream out = null;
		Map<String, Object> map = new HashMap<String,Object>();
		try {
			if(!"".equals(tInfoUttdata.getHdfsid())) {
				//获取hadoop信息
				TInfoHadoop hadoop = infoHadoopService.selectTInfoHadoopById(tInfoUttdata.getHdfsid());
				//创建连接
				fs = infoHadoopService.createHadoopConnect(hadoop);
				String hdfsPath = hadoop.getHdfspath()+tInfoUttdata.getHdfspath()+"/"+file.getOriginalFilename()
				//在hdfs中创建文件,并写入
				out = fs.create(new Path(hdfsPath));
				is = file.getInputStream();
				byte[] b = new byte[is.available()];
      	        int read = 0;
      	        while((read = is.read(b)) > 0){
      	            out.write(b, 0, read);
      	        }
      	       //存放数据
			}
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}finally {
			try {
				if(null!=fs) {
					fs.close();
				}
				if (is != null) {
					is.close();
				}
				if (out != null) {
					out.close();
				}
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		return map;
	}

大功告成。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
1. 展示HDFS文件列表前端代码: ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HDFS文件列表</title> </head> <body> <h3>HDFS文件列表</h3> <table> <tr> <th>文件名</th> <th>文件大小</th> <th>修改时间</th> <th>操作</th> </tr> <c:forEach items="${fileList}" var="file"> <tr> <td>${file.fileName}</td> <td>${file.fileSize}</td> <td>${file.modifiedTime}</td> <td> <a href="downloadFile?filePath=${file.filePath}">下载</a> <a href="deleteFile?filePath=${file.filePath}">删除</a> </td> </tr> </c:forEach> </table> <br> <form action="uploadFile" method="POST" enctype="multipart/form-data"> <label for="file">选择文件:</label> <input type="file" name="file" id="file"> <input type="submit" value="上传"> </form> </body> </html> ``` 2. 上传文件前端代码: ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上传文件</title> </head> <body> <h3>上传文件</h3> <form action="uploadFile" method="POST" enctype="multipart/form-data"> <label for="file">选择文件:</label> <input type="file" name="file" id="file"> <input type="submit" value="上传"> </form> <br> <a href="listFiles">返回文件列表</a> </body> </html> ``` 3. 删除文件前端代码: ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>删除文件</title> </head> <body> <h3>删除文件</h3> <form action="deleteFile" method="POST"> <label for="filePath">文件路径:</label> <input type="text" name="filePath" id="filePath"> <input type="submit" value="删除"> </form> <br> <a href="listFiles">返回文件列表</a> </body> </html> ``` 4. 下载文件前端代码: ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下载文件</title> </head> <body> <h3>下载文件</h3> <form action="downloadFile" method="POST"> <label for="filePath">文件路径:</label> <input type="text" name="filePath" id="filePath"> <input type="submit" value="下载"> </form> <br> <a href="listFiles">返回文件列表</a> </body> </html> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值