UEditor應用 —— 圖片上傳

時間  2019-11-13
標籤 ueditor 應用 圖片 上傳 简体版
原文   原文鏈接

本文介紹UEditor圖片上傳功能的實現。javascript

使用的例子項目架構以下：html

freemaker + spring boot + spring mvc + maven 前端

例子項目已上傳碼雲，碼雲地址以下：java

http://git.oschina.net/imlichao/ueditor-example-image_uploadgit

 

前端部署

下載UEditor項目包，並部署到項目中

pring boot項目放在靜態資源目錄下web

在頁面加載UEditor

<!DOCTYPE HTML>
<html lang="en" class="no-js">

<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
    <!-- spring boot默認靜態資源跟目錄在static下 -->
    <script type="text/javascript" charset="utf-8" src="/ueditor1_4_3_3/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/ueditor1_4_3_3/ueditor.all.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/ueditor1_4_3_3/lang/zh-cn/zh-cn.js"></script>
</head>

<body text-align:center>
    <table style="margin:0 auto;">
        <tr><td><h1>ueditor demo</h1></td></tr>
        <tr><td><script id="editor" type="text/plain" style="width:1024px;height:500px;"></script></td></tr>
    </table>
    <script type="text/javascript">
        var ue = UE.getEditor('editor');
    </script>
</body>

</html>

執行效果

到這裏UEditor一些基礎的編輯功能已經可以使用了，可是像圖片上傳這一類功能還須要進行後臺配置。spring

 

後端部署

目錄結構

配置後臺統一請求路徑

在ueditor.config.js找到serverUrl參數修改成本身的後臺請求接收方法json

// 服務器統一請求接口路徑
, serverUrl: "/ueditor/interface"

編寫請求接收方法後端

/**
     * ueditor 服務器統一請求接口(GET)
     * @param action config 加載時獲取配置文件
     * @return
     */
    @RequestMapping(value = "/ueditor/interface", method = RequestMethod.GET)
    @ResponseBody
    public String ueGetInterface(String action) {
        System.out.println("Successful GET interface call");
        return null;
    }

測試請求路徑是否設置成功。api

ue在加載時會調用一次serverUrl，咱們能夠在接收方法內打斷點或打印日誌進行測試。

 

在這裏要對統一請求路徑作一下說明：

ueditor會將全部的後臺請求發送至統一請求路徑。

不一樣的功能會使用不一樣的方式提交，獲取配置使用GET提交，上傳圖片或文件使用POST提交，因此接口要分開兩個方法寫。

既然全部的後臺請求都發送到一個接口，那麼怎麼區分請求的是什麼功能呢？答案就是action參數，action傳入「config」時表明獲取配置，action傳入「uploadimage」時表明上傳圖片，還有其餘的值在這裏就不作一一列舉了，能夠本身去看api文檔。

設置上傳配置

在服務器統一請求接口中獲取配置並轉換成json形式返回

/**
     * ueditor 服務器統一請求接口(GET)
     * @param action config 加載時獲取配置文件
     * @return
     */
    @RequestMapping(value = "/ueditor/interface", method = RequestMethod.GET)
    @ResponseBody
    public String ueGetInterface(String action) {
        System.out.println("Successful GET interface call");
        //建立文件上傳配置文件類並轉換爲json方式返回
        if(action != null && action.equals("config")){
            try {
                ObjectMapper mapper = new ObjectMapper();
                String config = mapper.writeValueAsString(new UeditorUploadConfig());
                return config;
            } catch (Exception e) {
                e.printStackTrace();
            }
        }

        return null;
    }
package pub.lichao.ueditor.controller;

/**
 * Ueditor 文件上傳配置
 */
public class UeditorUploadConfig {
    /**
     * 執行上傳圖片的action名稱
     */
    private String imageActionName="uploadimage";
    /**
     * 提交的圖片表單名稱
     */
    private String imageFieldName="upfile";
    /**
     * 上傳大小限制，單位B
     */
    private Integer imageMaxSize=2048000;
    /**
     * 上傳圖片格式顯示
     */
    private String[] imageAllowFiles=new String[]{".png",".jpg",".jpeg",".gif"};
    /**
     * 是否壓縮圖片
     */
    private Boolean imageCompressEnable=true;
    /**
     * 圖片壓縮最長邊限制
     */
    private Integer imageCompressBorder=1600;

    /**
     * 插入的圖片浮動方式
     */
    private String imageInsertAlign="none";

    /**
     * 圖片訪問路徑前綴
     */
    private String imageUrlPrefix="";


    ... get set 方法 ...
}

 

編寫圖片上傳邏輯

本項目將圖片保存到了項目本地路徑中，在實際應用中每每會將圖片保存在專門的圖片服務器中。例如阿里雲的OSS

/**
     * ueditor 服務器統一請求接口(POST)
     * @param action uploadimage 圖片上傳
     * @return
     */
    @RequestMapping(value = "/ueditor/interface", method = RequestMethod.POST)
    @ResponseBody
    public String uePostInterface(String action,MultipartFile upfile, HttpServletRequest request) {
        System.out.println("Successful POST interface call");
        //轉換json格式工具
        ObjectMapper mapper = new ObjectMapper();
        //返回值對象
        ImageState imageState = new ImageState();
        try {
            //執行圖片上傳並返回json格式結果
            if(action != null && action.equals("uploadimage")){
                System.out.println("uploadimage");
                //保存文件（將圖片上傳到項目中，生產應用中會使用OSS等文件服務器進行存放）
                String dirPath = request.getSession().getServletContext().getRealPath("/images");
                new File(dirPath).mkdirs(); //建立目錄
                System.out.println("圖片保存在{"+dirPath+"}目錄中");
                //爲防止重名使用時間戳從新命名
                String filename = "image" + Long.toString(System.currentTimeMillis()) + "." + FilenameUtils.getExtension(upfile.getOriginalFilename());   ;
                String filePath = dirPath + "/" + filename;
                upfile.transferTo(new File(filePath));//轉存文件

                //組裝返回值
                imageState.setState("SUCCESS");
                imageState.setOriginal(upfile.getOriginalFilename());
                imageState.setSize(Long.toString(upfile.getSize()));
                imageState.setTitle(filename);
                imageState.setType(upfile.getContentType());
                String url = request.getScheme() +"://" + request.getServerName()  + ":" +request.getServerPort() + request.getContextPath() + "/images/" + filename;
                imageState.setUrl(url);
                return mapper.writeValueAsString(imageState);
            }else{
                imageState.setState("無匹配的action類型");
                return mapper.writeValueAsString(imageState);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

        return null;
    }
package pub.lichao.ueditor.controller;

/**
 * Ueditor 圖片返回值
 */
public class ImageState {
    /**
     * 上傳狀態 上傳成功時必須返回"SUCCESS"，失敗時能夠返回錯誤提示
     */
    private String state;

    /**
     * 上傳的原文件名
     */
    private String original;

    /**
     * 文件大小
     */
    private String size;

    /**
     * 上傳後的新文件名
     */
    private String title;

    /**
     * 文件類型
     */
    private String type;

    /**
     * 圖片訪問地址
     */
    private String url;

    ... get set 方法 ...
}

 

訪問圖片

圖片上傳成功後要給前臺返回一個圖片的訪問地址，圖片纔可以正常在插件中展現。這裏提供有一個訪問項目中圖片的類用於本例子使用。若是是使用文件服務器就不用此部分代碼了，直接使用服務器提供的url返回給前臺展現便可。

package pub.lichao.ueditor.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.ResourceLoader;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import java.nio.file.Paths;

@Controller
public class ImageController {

    private final ResourceLoader resourceLoader;

    @Autowired
    public ImageController(ResourceLoader resourceLoader) {
        this.resourceLoader = resourceLoader;
    }

    /**
     * 訪問圖片
     * @param imagename
     * @param request
     * @return
     */
    @RequestMapping(value = "/images/{imagename:.+}", method = RequestMethod.GET)
    @ResponseBody
    public ResponseEntity<?> images(@PathVariable String imagename,HttpServletRequest request) {
        try {
            String dirPath = request.getSession().getServletContext().getRealPath("/images");
            return ResponseEntity.ok(resourceLoader.getResource("file:" + Paths.get(dirPath, imagename).toString()));
        } catch (Exception e) {
            return ResponseEntity.notFound().build();
        }
    }
}

 

其實圖片上傳是一個比較容易實現的功能，此文但願對你們有幫助。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程