前端:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layPage快速使用</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button>
<div class="layui-upload-list" style="max-width: 1000px;">
<table class="layui-table">
<colgroup>
<col>
<col width="150">
<col width="260">
<col width="150">
</colgroup>
<thead>
<tr><th>文件名</th>
<th>大小</th>
<th>上传进度</th>
<th>操作</th>
</tr></thead>
<tbody id="demoList"></tbody>
</table>
</div>
<button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div>
<script src="/layui/layui.js"></script>
<script>
layui.use(['upload', 'element', 'layer'], function(){
var upload = layui.upload;
//演示多文件列表
upload.render({
elem: '#testList'
,elemList: $('#demoList') //列表元素对象
,url: '/upload/file'
,accept: 'file'
,multiple: false
,number: 3
,auto: false
,bindAction: '#testListAction'
,accept: "images|file|video|audio"
,exts: 'jpg|png|gif|bmp|jpeg|zip|rar|7z|pdf|doc|docx|xls|xlsx|avi|mp4|rmvb|wmv|txt|pub|pptx|ppt'
,choose: function(obj){
var that = this;
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
,'<td>'
,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
,'</td>'
,'</tr>'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function(){
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function(){
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
});
that.elemList.append(tr);
element.render('progress'); //渲染新加的进度条组件
});
}
,done: function(res, index, upload){ //成功的回调
var that = this;
//if(res.code == 0){ //上传成功
var tr = that.elemList.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(3).html(''); //清空操作
delete this.files[index]; //删除文件队列已经上传成功的文件
return;
//}
//this.error(index, upload);
}
,allDone: function(obj){ //多文件上传完毕后的状态回调
console.log(obj)
}
,error: function(index, upload){ //错误回调
var that = this;
var tr = that.elemList.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
,progress: function(n, elem, e, index){ //注意:index 参数为 layui 2.6.6 新增
element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
}
});
//删除
tr.find('.demo-delete').on('click', function(){
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
});
})
</script>
</body>
</html>
后端:
<!--文件上传相关-->
<dependency>
<groupId>commons-net</groupId>
<artifactId>commons-net</artifactId>
<version>3.1</version>
</dependency>
<dependency>
<groupId>com.jcraft</groupId>
<artifactId>jsch</artifactId>
<version>0.1.49</version>
</dependency>
<dependency>
<groupId>ch.ethz.ganymed</groupId>
<artifactId>ganymed-ssh2</artifactId>
<version>261</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.28</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.3</version>
</dependency>
controller(返回类型必须遵循该ui框架的格式,所以创建了个map):
package com.wang.controller;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.HashMap;
import java.util.Map;
import java.util.Objects;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.wang.utils.FileUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
@RestController
@RequestMapping("/upload")
public class UploadController {
@Autowired
private static final ObjectMapper MAPPER = new ObjectMapper();
@PostMapping("/file")
public String upload(@RequestParam("file") MultipartFile file) throws JsonProcessingException {
try {
if (Objects.isNull(file) || file.isEmpty()) {
//判断非空
Map<String, Object> map3 = new HashMap<>();
map3.put("code", 201);
map3.put("msg", "文件为空,请重新上传");
map3.put("data", "文件为空,请重新上传");
return MAPPER.writeValueAsString(map3);
}
byte[] bytes = file.getBytes();
//要存入本地的地址放到path里面
Path path = Paths.get( FileUtils.UPLOAD_FOLDER + "/");
//如果没有files文件夹,则创建
if (!Files.isWritable(path)) {
Files.createDirectories(path);
}
//String extension = FileUtils.getFileExtension(file); //获取文件后缀
FileUtils.getFileByBytes(bytes, FileUtils.UPLOAD_FOLDER, file.getOriginalFilename());
System.out.println(file.getOriginalFilename());
Map<String, Object> map = new HashMap<>();
map.put("code", 200);
map.put("msg", "上传成功");
map.put("data", "上传成功");
return MAPPER.writeValueAsString(map);
} catch (Exception e) {
e.printStackTrace();
}
Map<String, Object> map2 = new HashMap<>();
map2.put("code", 201);
map2.put("msg", "上传失败");
map2.put("data", "上传失败");
return MAPPER.writeValueAsString(map2);
}
}