From 95c2766e64fc9feaf3d819989a9597ae0974cac3 Mon Sep 17 00:00:00 2001 From: whb <17803890193@163.com> Date: Tue, 15 Aug 2023 10:16:03 +0800 Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E6=B7=BB=E5=8A=A0=E7=9B=AE?= =?UTF-8?q?=E5=BD=95=E5=92=8C=E8=AF=BE=E7=A8=8B=EF=BC=8C=E7=BC=96=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pom.xml | 6 + .../course/controller/CourseController.java | 39 +++++ .../controller/DownloadController.java | 2 +- .../templates/layui-v2.6.8/courseList.html | 164 +++++++++++++----- 4 files changed, 162 insertions(+), 49 deletions(-) diff --git a/pom.xml b/pom.xml index c2fb84c..7eaa992 100644 --- a/pom.xml +++ b/pom.xml @@ -62,6 +62,12 @@ 5.0.7 + + + org.springframework.boot + spring-boot-starter-thymeleaf + + diff --git a/src/main/java/com/zhiyun/zhiyun03/course/controller/CourseController.java b/src/main/java/com/zhiyun/zhiyun03/course/controller/CourseController.java index 334a65d..8f89e3f 100644 --- a/src/main/java/com/zhiyun/zhiyun03/course/controller/CourseController.java +++ b/src/main/java/com/zhiyun/zhiyun03/course/controller/CourseController.java @@ -7,12 +7,16 @@ import com.zhiyun.zhiyun03.course.vo.CourseVo; import com.zhiyun.zhiyun03.course.vo.PageVO; import com.zhiyun.zhiyun03.utils.common.JsonResult; +import com.zhiyun.zhiyun03.utils.oss.AliyunOssUtil; import io.swagger.annotations.Api; import io.swagger.annotations.ApiOperation; import io.swagger.annotations.ApiParam; import org.springframework.web.bind.annotation.*; +import org.springframework.web.multipart.MultipartFile; import javax.annotation.Resource; +import java.io.File; +import java.io.FileOutputStream; /** @@ -29,6 +33,11 @@ public class CourseController { @Resource private CourseService courseService; + @Resource + private AliyunOssUtil ossUtil; + + + private String path = ""; /** * 查询分页课程信息 @@ -63,8 +72,10 @@ public class CourseController { @ApiOperation("课程添加") @GetMapping("/addCourse") public JsonResult addCourse(CourseVo courseVo){ + courseVo.setCourseIcon(path); int count = courseService.addCourse(courseVo); + return JsonResult.success(); } @@ -89,6 +100,34 @@ public class CourseController { } + @ApiOperation("图片上传") + @PostMapping("/uploadFile") + public JsonResult upload(@RequestParam("file") @RequestPart MultipartFile file){ + String upload = null; + try { + if (file != null) { + String fileName = file.getOriginalFilename(); + if (!"".equals(fileName.trim())) { + File newFile = new File(fileName); + + FileOutputStream os = new FileOutputStream(newFile); + os.write(file.getBytes()); + os.close(); + + //把file里的内容复制到newFile中 + file.transferTo(newFile); + upload = ossUtil.upload(newFile); + + } + } + } catch (Exception e) { + e.printStackTrace(); + } + path = "https://zhiyun03.oss-cn-beijing.aliyuncs.com/"+ upload; + return JsonResult.success(path); + } + + } diff --git a/src/main/java/com/zhiyun/zhiyun03/download/controller/DownloadController.java b/src/main/java/com/zhiyun/zhiyun03/download/controller/DownloadController.java index 8e5163a..bb6b2f4 100644 --- a/src/main/java/com/zhiyun/zhiyun03/download/controller/DownloadController.java +++ b/src/main/java/com/zhiyun/zhiyun03/download/controller/DownloadController.java @@ -46,7 +46,7 @@ public class DownloadController { @ApiOperation("图片上传") @PostMapping("/uploadFile") - public JsonResult upload(@RequestParam("upload") @RequestPart MultipartFile file){ + public JsonResult upload(@RequestParam("file") @RequestPart MultipartFile file){ String upload = null; try { if (file != null) { diff --git a/src/main/resources/templates/layui-v2.6.8/courseList.html b/src/main/resources/templates/layui-v2.6.8/courseList.html index e1eff67..90d42d0 100644 --- a/src/main/resources/templates/layui-v2.6.8/courseList.html +++ b/src/main/resources/templates/layui-v2.6.8/courseList.html @@ -9,9 +9,9 @@ @@ -159,15 +159,15 @@ // alert("取消") } }); - layui.use(['form'], function() { + layui.use(['form'], function () { var form = layui.form; $.ajax({ url: 'http://localhost:8080/application/queryDir', - type:"get", - success: function(data) { - if(data.msg === "success"){ + type: "get", + success: function (data) { + if (data.msg === "success") { //给一个默认值（‘请选择’） - var opt = ''; + var opt = ''; //获取返回的数据 var value = data.data; //循环遍历 @@ -178,8 +178,10 @@ $("#directorId").html(opt); form.render('select');//需要渲染一下 - }else{ - layer.alert(data.msg,{ icon:2,title:'提示'},function(i){ layer.closeAll();}); + } else { + layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) { + layer.closeAll(); + }); } } @@ -220,7 +222,7 @@
-
@@ -264,8 +266,8 @@ //拖拽上传 upload.render({ elem: '#test10' - ,url: 'http://localhost:8080/download/uploadFile?param=upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。 - ,done: function(res){ + , url: 'http://localhost:8080/download/uploadFile?param=upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。 + , done: function (res) { layer.msg('上传成功'); layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data); console.log(res) @@ -294,7 +296,7 @@
-
+
图片1 图片1 图片1 @@ -314,7 +316,7 @@
-
+
@@ -344,32 +346,95 @@ , btn2: function (index, layero) { // alert("取消") } + + + + }); - layui.use(['form'], function() { + layui.use(['form'], function () { var form = layui.form; $.ajax({ - url: 'http://localhost:8080/application/queryDir', - type:"get", - success: function(data) { - if(data.msg === "success"){ - //给一个默认值（‘请选择’） - var opt = ''; - //获取返回的数据 - var value = data.data; - //循环遍历 - for (var i in value) { - opt += '' - console.log(value[i].dirName) - } - $("#directorId").html(opt); - form.render('select');//需要渲染一下 + url: 'http://localhost:8080/application/queryDir', + type: "get", + success: function (data) { + if (data.msg === "success") { + //给一个默认值（‘请选择’） + var opt = ''; + //获取返回的数据 + var value = data.data; + //循环遍历 + for (var i in value) { + opt += '' + console.log(value[i].dirName) + } + $("#directorId").html(opt); + form.render('select');//需要渲染一下 - }else{ - layer.alert(data.msg,{ icon:2,title:'提示'},function(i){ layer.closeAll();}); - } + } else { + layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) { + layer.closeAll(); + }); + } + + } + }); + + layui.use('layer', function () { + var layer = layui.layer; + + $('.image-item').on('click', function () { + var imageUrl = $(this).attr('src'); + + // Open a modal with the image and upload button + layer.open({ + type: 1, + title: false, + closeBtn: 0, + area: ['auto', 'auto'], + content: ` +
+ + +
+ `, + success: function (layero) { + // Bind click event to the upload button + $(layero).find('.upload-button').on('click', function () { + var imageUrl = $(this).data('url'); + + // Simulate file selection or directly use the imageUrl + var selectedFile = new Blob(); // Replace with actual file + + // Create FormData and append data + var formData = new FormData(); + formData.append('imageUrl', imageUrl); + formData.append('file', selectedFile); + + // Use AJAX to upload the file + $.ajax({ + type: 'POST', + url: 'http://localhost:8080/api/course/uploadFile', // Replace with your backend upload URL + data: formData, + contentType: false, + processData: false, + success: function (response) { + // Handle success response from the backend + console.log('Image uploaded:', response); + console.log('Image uploaded:', formData.get('imageUrl')); + console.log('Image uploaded:', formData.get('file')); + layer.closeAll(); // Close the modal + }, + error: function (error) { + // Handle error response from the backend + console.error('Error uploading image:', error); + } + }); + }); + } + }); + }); + }); - } - }); }); } @@ -405,28 +470,31 @@
-
-
- +