前后端分离文件上传
程序员文章站
2024-03-20 16:35:22
...
后端代码
package com.sc.demo.controller;
import com.sc.demo.bean.StateInfo;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
@RestController
@CrossOrigin
@RequestMapping("/file")
public class ScController {
@PostMapping("/upload")
public StateInfo uploadSource(@RequestParam("file") MultipartFile[] files) {
String path = "E:/upload/";
for (MultipartFile file : files) {
// 判断文件是否有内容
if (file.isEmpty()) {
System.out.println("文件为空");
return new StateInfo(201,"文件为空");
}
String fileName = file.getOriginalFilename();
if (fileName.indexOf("\\") > 0) {
int index = fileName.lastIndexOf("\\");
fileName = fileName.substring(index + 1);
}
if (fileName.indexOf(".") >= 0) {
String[] fileNameSplitArray = fileName.split("\\.");
// 修改原文件名，防止附件重名覆盖原文件
fileName = fileNameSplitArray[0] + (int) (Math.random() * 100000) + "." + fileNameSplitArray[1];
}
System.out.println("fileName:" + fileName);
File dest = new File(path + fileName);
// 如果pathAll路径不存在，则创建相关该路径涉及的文件夹;
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdirs();
}
try {
file.transferTo(dest);
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
System.out.println("文件的路径名字" + path + fileName);
return new StateInfo(200,"上传成功",fileName);
}
return new StateInfo(202,"文件失败");
}
}
前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>多文件列表</legend>
</fieldset>
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button>
<div class="layui-upload-list">
<table class="layui-table">
<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>
</body>
<script type="text/javascript" src="layui/layui.js" ></script>
<script>
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
//多文件列表示例
var demoListView = $('#demoList'),
uploadListIns = upload.render({
elem: '#testList',
url: 'http://127.0.0.1:8088/file/upload',
accept: 'file',
multiple: true,
auto: false,
bindAction: '#testListAction',
choose: function(obj) {
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 / 1024).toFixed(1) + 'kb</td>', '<td>等待上传</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 值，以免删除后出现同名文件不可选
});
demoListView.append(tr);
});
},
done: function(res, index, upload) {
if(res.code == 200) { //上传成功
console.log(res)
var tr = demoListView.find('tr#upload-' + index),
tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
tds.eq(3).html(''); //清空操作
return delete this.files[index]; //删除文件队列已经上传成功的文件
}
this.error(index, upload);
},
error: function(index, upload) {
var tr = demoListView.find('tr#upload-' + index),
tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
});
});
</script>
</html>