这是一个比较复杂的问题，需要涉及到前
后端的交互，以及HDFS
文件系统的操作。下面是简单的代码示例，供参考。
前端代码：
```
<!DOCTYPE
html>
<
html>
<head>
<title>HDFS
文件管理</title>
<
meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
.file {
display: inline-block;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
cursor: pointer;
}
.file .name {
margin-top: 5px;
font-weight: bold;
}
.file .size {
margin-top: 5px;
font-size: 12px;
color: #999;
}
.file .icon {
font-size: 48px;
color: #999;
}
.file .icon.icon-folder {
color: #ffa500;
}
.file .icon.icon-file {
color: #4169e1;
}
</style>
</head>
<body>
<div>
<button id="btn-prev" onclick="prev()">
返回上一级</button>
<button id="btn-upload" onclick="upload()">上传
文件</button>
</div>
<div id="list"></div>
<script>
var path = "/";
$(function() {
loadList(path);
});
function loadList(path) {
$.get("/list", {path: path}, function(result) {
var files = result.files;
var
html = "";
for (var i = 0; i < files.length; i++) {
var file = files[i];
var icon = file.type == "directory" ? "icon-folder" : "icon-file";
html += '<div class="file" onclick="clickFile(\'' + file.path + '\')">';
html += '<div class="icon ' + icon + '">&#x' + icon.charCodeAt(0).toString(16) + ';</div>';
html += '<div class="name">' + file.name + '</div>';
html += '<div class="size">' + file.size + '</div>';
html += '</div>';
}
$("#list").
html(
html);
});
}
function clickFile(path) {
if (path.endsWith("/")) {
loadList(path);
} else {
download(path);
}
}
function prev() {
var index = path.lastIndexOf("/", path.length - 2);
path = index >= 0 ? path.substring(0, index + 1) : "/";
loadList(path);
}
function upload() {
var form = $('<form method="post" enctype="multipart/form-data"><input type="file" name="file"/></form>');
form.find('input').on('change', function() {
var file = this.files[0];
var formData = new FormData();
formData.append('file', file);
formData.append('path', path);
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(result) {
loadList(path);
}
});
}).click();
}
function download(path) {
window.location.href = "/download?path=" + encodeURIComponent(path);
}
</script>
</body>
</
html>
```
后端代码：
```
@Controller
public class HdfsController {
private static final Logger logger = LoggerFactory.getLogger(HdfsController.class);
private static final String HDFS_URI = "hdfs://localhost:9000";
private static final String HDFS_USER = "hadoop";
private FileSystem fs;
@PostConstruct
public void init() throws IOException, InterruptedException {
Configuration conf = new Configuration();
conf.set("fs.defaultFS", HDFS_URI);
conf.set("hadoop.user.name", HDFS_USER);
fs = FileSystem.get(conf);
}
@GetMapping("/list")
@ResponseBody
public Map<String, Object> list(@RequestParam("path") String path) throws IOException {
Path p = new Path(path);
FileStatus[] files = fs.listStatus(p);
List<Map<String, Object>> fileList = new ArrayList<>();
for (FileStatus file : files) {
Map<String, Object> fileInfo = new HashMap<>();
fileInfo.put("name", file.getPath().getName());
fileInfo.put("path", file.getPath().toString());
fileInfo.put("type", file.isDirectory() ? "directory" : "file");
fileInfo.put("size", file.isDirectory() ? "-" : formatSize(file.getLen()));
fileList.add(fileInfo);
}
Map<String, Object> result = new HashMap<>();
result.put("files", fileList);
return result;
}
@PostMapping("/upload")
@ResponseBody
public Map<String, Object> upload(@RequestParam("file") MultipartFile file, @RequestParam("path") String path) throws IOException {
Path p = new Path(path, file.getOriginalFilename());
FSDataOutputStream out = fs.create(p);
IOUtils.copy(file.getInputStream(), out);
out.close();
Map<String, Object> result = new HashMap<>();
result.put("success", true);
return result;
}
@GetMapping("/download")
public void download(HttpServletResponse response, @RequestParam("path") String path) throws IOException {
Path p = new Path(path);
FSDataInputStream in = fs.open(p);
response.setContentType("application/octet-stream");
response.setHeader("Content-Disposition", "attachment; filename=\"" + p.getName() + "\"");
IOUtils.copy(in, response.getOutputStream());
in.close();
response.flushBuffer();
}
private String formatSize(long size) {
String[] units = {"B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"};
int i = 0;
double s = size;
while (s >= 1024 && i < units.length - 1) {
s /= 1024;
i++;
}
return String.format("%.2f %s", s, units[i]);
}
}
```
需要注意的是，以上代码只是示例，实际使用时需要根据具体情况进行修改和完善。
5673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
