代码拉取完成，页面将自动刷新
2024年5月27日16:27:31 还活着
https://zhang_xing_ju.gitee.io/be-upload/index.html
//查询文件详情
@PostMapping("/findFileById")
@ResponseBody
public ResponseEntity findFileById(@RequestBody String[] ids) {
List<File> files = fileService.queryForList(ids);
return ResponseEntity.ok(files);
}
//文件上传
@PostMapping({"/upload"})
public ResponseEntity<File> upload(@RequestParam MultipartFile file) {
return ResponseEntity.ok(ileService.upload(file));
}
//文件下载
@GetMapping({"/download"})
public ResponseEntity<Void> download(String fileId) throws Exception {
}
let global = {
//上传文件地址
uploadUrl: "/file/upload",
//下载文件地址
downLoadUrl: "/file/download?id=",
//查询文件的详情信息
findFileByIdUrl: "/file/findById"
}
2.引入相关的css js
<link href="be-upload/common/common.css" rel="stylesheet">
<script src="be-upload/common/common.js"></script>
layui.use(['BeImgUpload'], function () {
let beImgUpload = layui.BeImgUpload;
//图片上传，会把图片的id通过逗号拼接成字符串，保存时通过name属性发送
beImgUpload.render({
id: "#imgupload",
name: "imgIds",
num: 5, //图片数量限制
size: 10, //10M, 大小限制
readonly: false, //非只读
type: ".png,.jpg,.jpeg",
value: ['fileId1', 'fileId2'] //图片初始化，是图片id可以是数组,也可以是以,拼接的字符串
});
})
file-upload-demo.html img-upload-demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上传示例</title>
<!-- 引入 layui.css -->
<link href="./layui/css/layui.css" rel="stylesheet">
<link href="be-upload/common/common.css" rel="stylesheet">
</head>
<body>
<div id="fileupload"></div>
</body>
<!-- 引入 layui.js -->
<script src="./layui/layui.js"></script>
<script src="be-upload/common/common.js"></script>
<script>
layui.use(['BeImgUpload'], function () {
let beImgUpload = layui.BeImgUpload;
//图片上传，会把图片的id通过逗号拼接成字符串，保存时通过name属性发送
beImgUpload.render({
id: "#imgupload",
name: "imgIds",
num: 5, //图片数量限制
size: 10, //10M, 大小限制
readonly: false, //非只读
type: ".png,.jpg,.jpeg",
value: ['fileId1', 'fileId2'] //图片初始化，是图片id可以是数组,也可以是以,拼接的字符串
});
})
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
