Parcourir la source

赛事封面上传

lchao il y a 4 mois
Parent
commit
9c265c550d

+ 48 - 1
qmjszx-admin/src/main/resources/templates/competition/add.html

@@ -4,6 +4,7 @@
     <th:block th:include="include :: header('新增赛事发布')"/>
     <th:block th:include="include :: datetimepicker-css"/>
     <th:block th:include="include :: summernote-css"/>
+    <th:block th:include="include :: bootstrap-fileinput-css"/>
 </head>
 <body class="white-bg">
 <div class="wrapper wrapper-content animated fadeInRight ibox-content" >
@@ -111,11 +112,21 @@
 
             </div>
         </div>
+        <div class="form-group">
+            <label class="col-sm-2 control-label">封面:</label>
+            <div class="col-sm-10">
+                <input type="hidden" name="competitionImg">
+                <div class="file-loading">
+                    <input class="form-control file-upload" id="competitionImg" name="file" type="file">
+                </div>
+            </div>
+        </div>
     </form>
 </div>
 <th:block th:include="include :: footer"/>
 <th:block th:include="include :: datetimepicker-js"/>
 <th:block th:include="include :: summernote-js"/>
+<th:block th:include="include :: bootstrap-fileinput-js"/>
 <script th:inline="javascript">
     var prefix = ctx + "competition"
     $("#form-competition-add").validate({
@@ -133,6 +144,42 @@
         },
     });
 
+
+
+    $(".file-upload").each(function (i) {
+        var inputName = this.id;
+        var val = $("input[name='" + inputName + "']").val();
+        // 将已上传的图片路径分割成数组
+        var initialPreview = val ? val.split(',') : [];
+
+        $(this).fileinput({
+            uploadUrl: ctx + 'common/upload',
+            initialPreviewAsData: true,
+            initialPreview: initialPreview,
+            maxFileCount: 1,
+            allowedFileExtensions: ['jpg', 'png'],
+            maxFileSize: 10240,
+            multiple: false,
+            // required: true
+        }).on('fileuploaded', function (event, data, previewId, index) {
+            var inputName = event.currentTarget.id;
+            var fullUrl = data.response.url; // 获取完整的URL
+            var urlObject = new URL(fullUrl);
+            var relativePath = urlObject.pathname; // 获取路径部分
+            var newBaseUrl = "http://localhost"; // 新的URL
+            var absoluteUrl = newBaseUrl + relativePath; // 拼接完整的URL
+
+            // 直接设置输入框的值为新上传的图片URL
+            $("input[name='" + inputName + "']").val(absoluteUrl);
+        }).on('fileremoved', function (event, key, jqXHR, pd) {
+            var inputName = event.currentTarget.id;
+            // 移除文件后,清空输入框的值
+            $("input[name='" + inputName + "']").val('');
+        });
+
+        $(this).fileinput('_initFileActions');
+    });
+
     function submitHandler() {
         var applyStartTime = $('#applyStartTime').val()
         var applyEndTime = $('#applyEndTime').val()
@@ -171,7 +218,7 @@
         $('.summernote').summernote({
             lang: 'zh-CN',
             dialogsInBody: true,
-            height: 400,
+            height: 300,
             callbacks: {
                 onChange: function (contents, $edittable) {
                     $("input[name='" + this.id + "']").val(contents);

+ 44 - 0
qmjszx-admin/src/main/resources/templates/competition/edit.html

@@ -4,6 +4,7 @@
     <th:block th:include="include :: header('修改赛事发布')" />
     <th:block th:include="include :: datetimepicker-css" />
     <th:block th:include="include :: summernote-css" />
+    <th:block th:include="include :: bootstrap-fileinput-css"/>
 </head>
 <body class="white-bg">
     <div class="wrapper wrapper-content animated fadeInRight ibox-content">
@@ -96,11 +97,21 @@
                     </div>
                 </div>
             </div>
+            <div class="form-group">
+                <label class="col-sm-2 control-label">图片:</label>
+                <div class="col-sm-10">
+                    <input type="hidden" name="noticeImg" th:field="*{competitionImg}">
+                    <div class="file-loading">
+                        <input class="form-control file-upload" id="competitionImg" name="file" type="file" >
+                    </div>
+                </div>
+            </div>
         </form>
     </div>
     <th:block th:include="include :: footer" />
     <th:block th:include="include :: datetimepicker-js" />
     <th:block th:include="include :: summernote-js" />
+    <th:block th:include="include :: bootstrap-fileinput-js"/>
     <script th:inline="javascript">
         var prefix = ctx + "competition";
         $("#form-competition-edit").validate({
@@ -165,6 +176,39 @@
                 $('#' + this.id).summernote('code', content);
             })
         });
+
+        $(".file-upload").each(function (i) {
+            var inputName = this.id;
+            var val = $("input[name='" + inputName + "']").val();
+            // 将已上传的图片路径分割成数组
+            var initialPreview = val ? val.split(',') : [];
+            $(this).fileinput({
+                uploadUrl: ctx + 'common/upload',
+                initialPreviewAsData: true,
+                initialPreview: initialPreview,
+                maxFileCount: 1,
+                allowedFileExtensions: ['jpg', 'png'],
+                maxFileSize: 10240,
+                multiple: false,
+            }).on('fileuploaded', function (event, data, previewId, index) {
+                var inputName = event.currentTarget.id;
+                var existingValue = $("input[name='" + inputName + "']").val();
+                var fullUrl = data.response.url; // 获取完整的URL
+                var urlObject = new URL(fullUrl);
+                var relativePath = urlObject.pathname; // 获取路径部分
+                // var newBaseUrl = "http://192.168.4.27"; // 新的基URL
+                var newBaseUrl = "http://localhost"; // 新的基URL
+                var absoluteUrl = newBaseUrl + relativePath; // 拼接完整的URL
+
+                // 如果已经存在值,则替换为新值
+                $("input[name='" + inputName + "']").val(absoluteUrl);
+            }).on('fileremoved', function (event, id, index) {
+                var inputName = event.currentTarget.id;
+                $("input[name='" + inputName + "']").val(''); // 移除后清空输入框
+            });
+
+            $(this).fileinput('_initFileActions');
+        });
     </script>
 </body>
 </html>

+ 5 - 0
qmjszx-business/src/main/java/beilv/competition/domain/Competition.java

@@ -130,11 +130,16 @@ public class Competition extends BaseEntity {
      * 发布人id
      */
     private String publishBy;
+
     /**
      * 发布时间
      */
     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
     private Date publishTime;
+    /**
+     * 封面
+     */
+    private String competitionImg;
 
     @Override
     public String toString() {

+ 5 - 1
qmjszx-business/src/main/resources/mapper/competition/CompetitionMapper.xml

@@ -29,6 +29,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <result property="publishTime"    column="publish_time"    />
         <result property="publishBy"    column="publish_by"    />
         <result property="publishName"    column="publish_name"    />
+        <result property="competitionImg"    column="competition_img"    />
     </resultMap>
 
     <sql id="selectCompetitionVo">
@@ -36,7 +37,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
                competition_place, apply_start_time, apply_end_time, apply_before_time,
                competition_maximum, competition_expense, viewing_ticket,
                competition_details, registration_notes, competition_state,
-               create_time, create_by, create_name, update_time, update_by, update_name, publish_time, publish_by, publish_name
+               create_time, create_by, create_name, update_time, update_by, update_name, publish_time, publish_by, publish_name,competition_img
         from beilv_competition
     </sql>
 
@@ -83,6 +84,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="createName != null">create_name,</if>
             <if test="updateName != null">update_name,</if>
             <if test="publishName != null">publish_name,</if>
+            <if test="competitionImg != null">competition_img,</if>
          </trim>
         <trim prefix="values (" suffix=")" suffixOverrides=",">
             <if test="competitionTitle != null">#{competitionTitle},</if>
@@ -108,6 +110,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="createName != null">#{createName},</if>
             <if test="updateName != null">#{updateName},</if>
             <if test="publishName != null">#{publishName},</if>
+            <if test="competitionImg != null">#{competitionImg},</if>
          </trim>
     </insert>
 
@@ -131,6 +134,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="updateTime != null">update_time = #{updateTime},</if>
             <if test="updateBy != null">update_by = #{updateBy},</if>
             <if test="updateName != null">update_name = #{updateName},</if>
+            <if test="competitionImg != null">competition_img = #{competitionImg},</if>
         </trim>
         where id = #{id}
     </update>