LayUi + SpringBoot + Maven 實現(xiàn)圖片的上傳

LayUi + SpringBoot + Maven 實現(xiàn)圖片的上傳

需要的依賴包：

commons-io2.6.jar
commons-fileupload1.4.jar

Maven的pom.xml配置

<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.6</version>
</dependency>
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.4</version>
</dependency>
//將以上代碼粘貼到pom.xml的<dependencies></dependencies>中  等待IDEA自動下載

前臺LayUi代碼部分

render部分

layui.use(['upload','layer','table'], function () {
            table = layui.table;
            var upload = layui.upload;
            var layer=layui.layer;

            //上傳監(jiān)聽
            upload.render({
                elem: '#test1',
                url: '../../../upload',
                auto:true,            //自動提交 開啟
                dragDrop: true,       //是否允許拖拽上傳
                tailor: true,
                accept:'images',     //允許上傳的文件類型
                size:10240,           //設置文件最大可允許上傳的大小，單位 KB。不支持ie8/9
                field:'file',        //MultipartFile file 對應，layui默認就是file,要改動則相應改動
                before: function(obj){//文件上傳前的回調
                //預讀本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $("#demoText").text("");
                        $('#demo1').attr('src', result); //圖片鏈接（base64）

                    });

                },
                //done 上傳后的回調  詳情見LayUi官方文檔 
                done: function(res, index, upload) {
                    //每個圖片上傳結束的回調，成功的話，就把新圖片的名字保存起來，作為數(shù)據提交
                    console.log(res.code);
                    if(res.code=="1"){
                        layer.msg("上傳接口異常");
                    }else{
                        imgurls=imgurls+""+res.data.src;
                        $('#imgUrls').val(imgurls);
                    }
                },
                onComplete: function (response) {                // 上傳完成的回調方法
                    console.info("文件上傳完成");
                    console.info(response);
                }

            });

隱藏域部分

//當前案例是公司新聞部分   圖片上傳區(qū)域為 虛線內
<form id="bj" class="layui-form" hidden="hidden">
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-input-inline" >
                <input type="hidden" name="news_id" required lay-verify="required" placeholder="請輸入新聞編號" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新聞標題：</label>
            <div class="layui-input-inline">
                <input type="text" name="news_title" required lay-verify="required" placeholder="請輸入新聞標題" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新聞描述：</label>
            <div class="layui-input-inline">
                <input type="text" name="news_desc"    autocomplete="off" class="layui-input" placeholder="請輸入新聞描述">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新聞內容：</label>
            <div class="layui-input-inline">
                <input type="text" name="news_content"  required lay-verify="required" placeholder="請輸入新聞內容" autocomplete="off" class="layui-input">
            </div>
        </div>
------------------------------------------------------------------------------------------------
        <!-- 上傳圖片位置 -->
        <div class="layui-form-item">
            <label class="layui-form-label">圖片上傳: </label>
            <div class="layui-input-block">
                <button type="button" class="layui-upload-drag" id="test1">
                    <p id="demoText"><i class="layui-icon">&#xe67c;</i>點擊上傳，或將文件拖拽到此處</p>
                    <img class="layui-upload-img" id="demo1" width="100%" alt="">
                </button>
            </div>

        </div>
        <!-- 隱藏域  隱藏圖片路徑 -->
        <input type="hidden" id="imgUrls" name="img_url"  class="layui-input">
------------------------------------------------------------------------------------------------
        <div class="layui-form-item">
            <label class="layui-form-label">閱讀次數(shù)：</label>
            <div class="layui-input-inline">
                <input type="text" name="news_num"  required lay-verify="required" placeholder="請輸入閱讀次數(shù)" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">發(fā)布時間：</label>
            <div class="layui-input-inline">
                <input type="text" name="news_date" required lay-verify="required" placeholder="請輸入發(fā)布時間" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</form>

Layer彈出層清空方法（這樣可以清楚上次顯示的圖片）

layer.close(ulayer);  //ulayer是彈出層的名稱
location.reload();

后臺部分

Controller層

/*以下是文件上傳部分  在提交全部彈框信息之前就應該將圖片上傳到服務器 然后將存儲后的路徑返回給前臺 前臺點擊提交 將圖片的存儲路徑保存*/
@SuppressWarnings("deprecation")
@RequestMapping("/upload")
@ResponseBody
public ImgResult uplpad(MultipartFile file, HttpServletRequest request) {
    System.out.println(file.getOriginalFilename());
    String desFilePath = "";         //圖片保存路徑
    String oriName = "";             //原文件名
    ImgResult result = new ImgResult();
    Map<String, String> dataMap = new HashMap<>();
    ImgResult imgResult = new ImgResult();
    try {
        // 1.獲取原文件名
        oriName = file.getOriginalFilename();

        // 2.獲取原文件圖片后綴，以最后的.作為截取(.jpg)
        String extName = oriName.substring(oriName.lastIndexOf("."));

        // 3.生成自定義的新文件名，這里以UUID.jpg|png|xxx作為格式（可選操作，也可以不自定義新文件名）
        String uuid = UUID.randomUUID().toString();
        String newName = uuid + extName;

        // 4.獲取要保存的路徑文件夾

        String realPath = "E:\\estart\\src\\main\\resources\\static\\uploadImges";

        // 5.保存圖片

        desFilePath = realPath + "\\" + newName;                //保存路徑
        File desFile = new File(desFilePath);                   //創(chuàng)建文件
        file.transferTo(desFile);

        // 6.返回保存結果信息
        result.setCode(0);                                      //保存狀態(tài)碼 成功 0 失敗 1
        dataMap = new HashMap<>();
        dataMap.put("src", "static/uploadImges/" + newName); //保存真實路徑
        result.setData(dataMap);                                //保存信息
        result.setMsg(oriName + "上傳成功！");                  //返回提示信息
        return result;

    } catch (IllegalStateException e) {
        imgResult.setCode(1);
        System.out.println(desFilePath + "圖片保存失敗");
        return imgResult;
    } catch (IOException e) {
        imgResult.setCode(1);
        System.out.println(desFilePath + "圖片保存失敗--IO異常");
        return imgResult;
    }
}

依賴的基本類(Pojo層)

package com.ftg.estart.pojo;
import java.util.Map;
public class ImgResult {
   
   private Integer code;            //圖片的保存狀態(tài)信息（成功或者失?。?   private String msg;              //要傳回給前臺的提示信息
   private Map<String, String> data;//這里存的是圖片路徑等信息
   
   private Integer totalCount=0;    //這里作為后期要做多圖片上傳的總數(shù)的記錄
   private Integer successCount=0;  //這里作為后期要做多圖片上傳的成功總數(shù)的記錄
   private Integer failCount=0;     //這里作為后期要做多圖片上傳的失敗總數(shù)的記錄
   
   public ImgResult() {
   }

   public ImgResult(Integer code, String msg, Map<String, String> data) {
      this.code = code;
      this.msg = msg;
      this.data = data;
   }

   public Integer getCode() {
      return code;
   }

   public void setCode(Integer code) {
      this.code = code;
   }

   public String getMsg() {
      return msg;
   }

   public void setMsg(String msg) {
      this.msg = msg;
   }

   public Map<String, String> getData() {
      return data;
   }

   public void setData(Map<String, String> data) {
      this.data = data;
   }

   public Integer getTotalCount() {
      return totalCount;
   }

   public void setTotalCount(Integer totalCount) {
      this.totalCount = totalCount;
   }

   public Integer getSuccessCount() {
      return successCount;
   }

   public void setSuccessCount(Integer successCount) {
      this.successCount = successCount;
   }

   public Integer getFailCount() {
      return failCount;
   }

   public void setFailCount(Integer failCount) {
      this.failCount = failCount;
   }

}
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容