LayUI图片上传
//设置上传按钮 <button type="button" style="display: none" class="layui-btn layui-authority cvv66nwtu" id="nationality">上传</button> //设置上传完成后的图片回显框 <div class="layui-upload-list"> <img class="bigImg layui-upload-img" style="height: 160px;width: 250px" id="nationalityimg"> <p id="nationalityText"></p> </div> //文件上传 var posterWidth = 1024, posterHeight = 768; layui.upload.render({ //默认发post请求 elem: '#nationality' ,data:{"shipId":ship.id,"sequence":"0"} , url:config.base_server+'squid/ydShip/upoldImgUpload' , exts: 'jpg|png|jpeg' , size: 200//图片大小必须为200kb , drag: true , auto: false //表示不自动上传 ,bindAction:'#bcbtn2'//指定和谁一起上传 , choose: function(obj) { obj.preview(function(index, file, result) {//index索引 file 文件名.后缀 result 图片数据 var img = new Image(); img.onload = function() { $('#nationalityimg').attr('src', result); //图片链接(base64)不支持ie8 obj.upload(index, file); }; img.src = result; }); } , before: function(obj) { //图片预览事件 layer.load(); } , done: function(res) { //上传成功发生成的事件 layer.closeAll('loading'); if (res.code > 0) { return layer.msg(res.msg); } } , error: function() {//上传失败的事件 layer.closeAll('loading'); layer.alert('上传失败,请重试!'); } });
//后台部分
@ApiOperation(value = "上传照片照", notes = "") @ApiImplicitParams({ @ApiImplicitParam(name = "token", value = "令牌", required = true, dataType = "String"), }) @PostMapping("/upoldImgUpload") public Result addlicenseImgUpload(MultipartFile file) throws Exception { String s = ydShipService.addimportShip(file); if(s!=null){ return Result.success(s); }else { return Result.failure(ResultCode.ERROR); } } /** * 上传图片 */ public String addimportShip(MultipartFile file) throws Exception { //得到上传服务器地址 FastFileStorageClient storageClient = upLoadingService.getStorageClient(); String myFileName = file.getOriginalFilename();// 文件原名称 String fileName = UUID.randomUUID() + myFileName.substring(myFileName.lastIndexOf("."));//得到名 StorePath storePath = storageClient.uploadFile(file.getBytes(), fileName); //得到group 和path 用于从服务器下载上传的图片 String group = storePath.getGroup(); String path = storePath.getPath(); byte[] theTytes = storageClient.downloadFile(group, path);//String groupName, String path BASE64Encoder base64Encoder = new BASE64Encoder(); String encode = base64Encoder.encode(theTytes); return encode; } //获得文件服务器地址 public FastFileStorageClient getStorageClient() { //初始化连接池 FdfsConnectionPool pool = new FdfsConnectionPool(); // 设置tracker List<String> trackers = Arrays.asList("服务器地址", "服务器地址"); TrackerConnectionManager tcm = new TrackerConnectionManager(pool, trackers); TrackerClient trackerClient = new DefaultTrackerClient(tcm); // 得到storage客户端 ConnectionManager cm = new ConnectionManager(pool); FastFileStorageClient storageClient = new DefaultFastFileStorageClient(trackerClient, cm); return storageClient; }
导入时出现一个转的圈表示正在上传或导入 在...之前事件 before:function(){ layer.msg('数据导入中...',{icon:16,shade:0.01,time:0}); }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构