JAVA UEditor 文件上傳、圖片上傳、視頻上傳后台實現

項目中用到了UEditor，第一次使用，雖然UEditor 提供了JAVA后台文件上傳代碼，但是在項目中僅使用富文本編輯器和圖片、視頻的上傳。不想因為實現圖片、視頻上傳功能，引入一堆文件。

首選，需要去UEditor 上，拿配置文件(config.json):

https://github.com/fex-team/ueditor/tree/v1.4.3.2/jsp

 

 

 UEditor 每次打開，都會請求一次后台，獲取配置項，后台返回config.json文件中的內容(JSON對象)。

后台接收萬上傳圖片、視頻文件后，需要至少給前端返回兩個字段state(狀態: SUCCESS)和url(前端訪問URL)。

例：

{
     "state": "SUCCESS",
     "url": "前端訪問路徑"
}

其他返回字段，可參考UEditor 示例。

使用UEditor 的上傳整體流程是:

0. ueditor.config.js 文件中，配置后台統一訪問地址(讀取配置請求、上傳圖片、上傳視頻，每個請求都會有action參數)

 

 

 

1. 實現讀取配置項請求 GET, 參數: action = config

　　讀取config.json，返回到前端:

2. 實現上傳文件POST, 參數: action = uploadimage,（可在config.json中修改）

　　為代碼簡單，此處沒區分圖片、視頻上傳判斷。統一存儲到一個位置下

　　

    @PostMapping("config")
    @ResponseBody
    public JSONObject UEditFileUpload(@RequestParam(value = "file", required = false) MultipartFile file, @RequestParam("action") String actionName) throws Exception {
        //通過actionName區分視頻、圖片上傳
        //讀流、寫文件
        InputStream inputStream = file.getInputStream();
        byte bytes[] = new byte[inputStream.available()];
        inputStream.read(bytes);
        String fileName = UUID.randomUUID().toString().replace("-", "") + file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
        FileUtil.uploadFile(bytes, "D:/tmp/", fileName);
        
        //構建返回參數，此處用的最精簡的必傳參數。
        JSONObject jsonObject = new JSONObject();
 jsonObject.put("state", "SUCCESS");//上傳狀態 jsonObject.put("url", "/files/" + fileName);//上傳圖片、視頻后，前端訪問地址 return jsonObject;
    }

 

3. config.json中配置提交圖片/視頻時文件表單名稱

imageFieldName為圖片上傳時文件數據表單名稱

videoFieldName為視頻上傳時文件數據表單名稱
這里我統一使用的叫file