文件上传示例

# BeUpload **Repository Path**: moochikoo/be-upload ## Basic Information - **Project Name**: BeUpload - **Description**: 基于layui实现的上传组件,实现上传附件数量、类型、大小、回显、删除、放大、只读的功能 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: https://zxj1997-java.github.io/be-upload/ - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 4 - **Created**: 2024-11-23 - **Last Updated**: 2024-11-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README :airplane: 2024年9月30日09:30:33 还活着 ### 示例地址 https://zxj1997-java.github.io/be-upload/ ### 使用说明 ```java //查询文件详情 @PostMapping("/findFileById") @ResponseBody public ResponseData findFileById(@RequestBody String[] ids) { List files = fileService.queryForList(ids); return ResponseEntity.ok(files); } //文件上传 @PostMapping({"/upload"}) public ResponseData upload(@RequestParam MultipartFile file) { return ResponseEntity.ok(ileService.upload(file)); } //文件下载 @GetMapping({"/download"}) public ResponseData download(String fileId) throws Exception { } ``` 接口返回格式 ```json { "code":200, "data":{ "fileName":"微信图片_20240910134204.png", "fileSize":43167, "fileType":"image/png", "id":"66f9fee16fbb4c54258d90de" }, "message":null, "success":true } ``` 1. 修改文件相关的后台接口地址 [common.js](layui_exts%2Fbe-upload%2Fcommon%2Fcommon.js) ```js let global = { //上传文件地址 uploadUrl: "/file/upload", //下载文件地址 downLoadUrl: "/file/download?id=", //查询文件的详情信息 findFileByIdUrl: "/file/findById" } ``` 2.引入相关的css js ```js /*最新的版本无需手动引入css*/ ``` 3. 像layui的其他组件一样使用即可 ```js 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](file-upload-demo.html) [img-upload-demo.html](img-upload-demo.html) ```html 文件上传示例

``` ### 效果图 ![img.png](img%2Fimg.png) ![img_2.png](img%2Fimg_2.png) ![img_1.png](img%2Fimg_1.png)