百度富文本编辑器整合fastdfs文件服务器上传 概述 详细

技术:springboot+maven+ueditor
 
百度富文本整合fastdfs文件服务器上传

详细

一、前言

(1)适合人群

1,java服务端开发人员

2,初级人员开发人员

3,了解spring springboot+maven

3,了解小程序开发跟前端人员接口对接

(2) 你需要准备什么?

1,积极主动学习

2,微信开发基本流程

3,java后端几大框架掌握如(spring springboot maven mybatis)

二、前期准备工作

软件环境:idea

官方下载:https://www.eclipse.org/downloads/

1丶基本需求

1,实现商品支付功能

2,项目目录结构

百度富文本编辑器整合fastdfs文件服务器上传
概述
详细

三、实现步骤

  1. 首先去官网下载源文件 将以下文件导入自己的项目

    百度富文本编辑器整合fastdfs文件服务器上传
概述
详细

  2. 按照教程你需要访问index.html

    百度富文本编辑器整合fastdfs文件服务器上传
概述
详细

这里的index.html其实这个index.html的作用也是获取同目录下的json文件来读取配置

所以导致你获取不到config.json

由于要用到文件上传 需要导入jar包 放在WEB_INF的lib目录下就行 然后右键项目buildpath一下

我这里用maven

百度富文本编辑器整合fastdfs文件服务器上传
概述
详细

百度ueditor maven可能会找不到 可以自己把jar放到本地仓库 我是直接放到公司maven私服上 代替config.json文件跟config.json一样 但是换成了java

package com.ueditor.util;

public class PublicMsg {
    public final static String UEDITOR_CONFIG = "{
" +
               "    "imageActionName": "uploadimage",
" +
               "    "imageFieldName": "upfile",
" +
               "    "imageMaxSize": 2048000,
" +
               "    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
" +
               "    "imageCompressEnable": true,
" +
               "    "imageCompressBorder": 1600,
" +
               "    "imageInsertAlign": "none",
" +
               "    "imageUrlPrefix": "",
" +
               "    "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
" +
               "
" +
               "    "scrawlActionName": "uploadscrawl",
" +
               "    "scrawlFieldName": "upfile",
" +
               "    "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
" +
               "    "scrawlMaxSize": 2048000,
" +
               "    "scrawlUrlPrefix": "",
" +
               "    "scrawlInsertAlign": "none",
" +
               "
" +
               "    "snapscreenActionName": "uploadimage",
" +
               "    "snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
" +
               "    "snapscreenUrlPrefix": "",
" +
               "    "snapscreenInsertAlign": "none",
" +
               "
" +
               "    "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
" +
               "    "catcherActionName": "catchimage",
" +
               "    "catcherFieldName": "source",
" +
               "    "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
" +
               "    "catcherUrlPrefix": "",
" +
               "    "catcherMaxSize": 2048000,
" +
               "    "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
" +
               "
" +
               "    "videoActionName": "uploadvideo",
" +
               "    "videoFieldName": "upfile",
" +
               "    "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",
" +
               "    "videoUrlPrefix": "",
" +
               "    "videoMaxSize": 102400000,
" +
               "    "videoAllowFiles": [
" +
               "        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
" +
               "        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"],
" +
               "
" +
               "    "fileActionName": "uploadfile",
" +
               "    "fileFieldName": "upfile",
" +
               "    "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",
" +
               "    "fileUrlPrefix": "",
" +
               "    "fileMaxSize": 51200000,
" +
               "    "fileAllowFiles": [
" +
               "        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
" +
               "        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
" +
               "        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
" +
               "        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
" +
               "        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
" +
               "    ],
" +
               "
" +
               "    "imageManagerActionName": "listimage",
" +
               "    "imageManagerListPath": "/ueditor/jsp/upload/image/",
" +
               "    "imageManagerListSize": 20,
" +
               "    "imageManagerUrlPrefix": "",
" +
               "    "imageManagerInsertAlign": "none",
" +
               "    "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
" +
               "
" +
               "    "fileManagerActionName": "listfile",
" +
               "    "fileManagerListPath": "/ueditor/jsp/upload/file/",
" +
               "    "fileManagerUrlPrefix": "",
" +
               "    "fileManagerListSize": 20,
" +
               "    "fileManagerAllowFiles": [
" +
               "        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
" +
               "        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
" +
               "        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
" +
               "        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
" +
               "        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
" +
               "    ] 
" +
               "
" +
               "}";
       /**
        * Ueditor的返回状态类型
        */
       public enum UeditorMsg{
           SUCCESS("SUCCESS"),ERROR("上传失败");
           private String v;
           UeditorMsg(String v){
               this.v =v;
           }
           public String get(){
               return this.v;
           }
       }
}

3.修改ueditor.config.js里的配置


百度富文本编辑器整合fastdfs文件服务器上传
概述
详细

Contorller接收改路径 刚开始会请求你要是拦截路径会看到xxx/controller.jsp?action=config

等于初始化的时候会先请求action=config

这时候我们直接把java的代替config.json配置返回回去

注意一下这里自定义了文件路径,本文用Vo需要返回JSON 这是支持二次开发的文档上写的返回json格式

//{state:”数据状态信息”,url:”图片回显路径”,title:”文件title”,original:”文件名称”,···}
package com.ueditor.conterller;


import com.google.common.collect.Maps;
import com.ueditor.util.FastDFSClientWrapper;
import com.ueditor.util.PublicMsg;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import java.util.Map;

@Controller
@RequestMapping("UeditorController")
public class UeditorController {

   @Autowired
   private FastDFSClientWrapper fastDFSClientWrapper;



   @RequestMapping("/index")
       private String showPage(){
           return "index";
       }

      @RequestMapping(value="/ueditor")
       @ResponseBody
       public String ueditor(HttpServletRequest request) {

           return PublicMsg.UEDITOR_CONFIG;
       }

       @RequestMapping(value="/imgUpload")
       @ResponseBody
       public Map  imgUpload(MultipartFile upfile) throws IOException {

         byte[] bytes = upfile.getBytes();
         String originalFileName = upfile.getOriginalFilename();
         String extension = originalFileName.substring(originalFileName.lastIndexOf(".") + 1);
         String fileName = upfile.getName();
         long fileSize = upfile.getSize();
         System.out.println(originalFileName + "==========" + fileName + "===========" + fileSize + "===============" + extension + "====" + bytes.length);
         String url= "http://4.105.159.213/"+fastDFSClientWrapper.uploadFile(bytes, fileSize, extension);
         
         String fileId ="ces";

         return resultMap("SUCCESS",url,fileSize,fileId,fileName,extension);
       }

       private Map<String,Object> resultMap(String state,String url,long size,String title,String original,String type){
           Map<String ,Object> result = Maps.newHashMap();
           result.put("state",state);
           result.put("original",original);
           result.put("size",size);
           result.put("title",title);
           result.put("type",type);
           result.put("url", url);
           return result;
       }

}

页面引入js

<script type="text/javascript" charset="utf-8" src="http://localhost:8081/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="http://localhost:8081/ueditor.all.js"> </script>
<!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="http://localhost:8081/lang/zh-cn/zh-cn.js"></script>

初始化编辑器和内容

   <!-- 实例化编辑器 -->
<script type="text/javascript">
        UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
        UE.Editor.prototype.getActionUrl = function(action) {
            if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
                return 'http://localhost:8081/UeditorController/imgUpload';
                //'http://localhost:8080/imgUpload';为方法imgUpload的访问地址
            } else {
                return this._bkGetActionUrl.call(this, action);
            }
        }
</script>

四、运行效果

百度富文本编辑器整合fastdfs文件服务器上传
概述
详细百度富文本编辑器整合fastdfs文件服务器上传
概述
详细百度富文本编辑器整合fastdfs文件服务器上传
概述
详细

五、补充

整个功能已经出来了下面可以安装FastDFS由于内容太不写出来了我这里提供一个安装FastDFS地址按照这地址可以搭建文件服务器的

FastDFS上传

https://www.cnblogs.com/yufeng218/p/8111961.html

注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权