SpringBoot(SpringMVC)集成UMeditor

1、去官網下載umeditor放到nginx根目錄下
將umeditor的目錄命名爲umeditor

2、修改umeditor的配置文件umeditor.config.js

# 修改前
        // ,imageUrl:URL+"jsp/imageUp.jsp"             //圖片上傳提交地址
        // ,imagePath:URL + "jsp/"                     //圖片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
# 修改後
        ,imageUrl:"/sys/ueditor/upfile"             //圖片上傳提交地址
        ,imagePath:""                     //圖片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置

3、文件上傳Controller

@RestController
@Api(value = "富文本編輯器", tags = "富文本編輯器")
@RequestMapping("/sys/ueditor")
@Slf4j
public class UEditorController {

    /**
     * 文件上傳service
     */
    @Autowired
    private SysFileInfoService sysFileInfoService;

    @RequestMapping(value="/upfile")
    @ApiOperation(value = "UMEditor文件上傳")
    public UEditorResult upfile(HttpServletRequest request, HttpServletResponse response) {
        try {
            UEditorResult result = new UEditorResult();
            result.setState("SUCCESS");
            response.setContentType("application/json");
            MultipartHttpServletRequest multipart = (MultipartHttpServletRequest)request;
            MultipartFile multipartFile = multipart.getFile("upfile");
            // 保存文件 並返回文件信息
            SysFileInfo fileInfo = sysFileInfoService.upload(multipartFile);
            result.setSize(multipartFile.getSize());
            String oldFileName = multipartFile.getOriginalFilename();
            result.setType(oldFileName.substring(oldFileName.lastIndexOf(".")));
            result.setTitle(oldFileName);
            result.setOriginal(oldFileName);
            // 文件下載路徑
            String url = "/sys/file/download/"+fileInfo.getId();
            result.setUrl(url);
            return result ;
        } catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException(e.getMessage());
        }
    }

@Data
public class UEditorResult {
    private String state;
    private String url;
    private String title;
    private String original;
    private String type;
    private Long size;
}

4、nginx增加配置
使用nginx做反向代理解決跨域問題

	server {
        listen       8076;
        server_name  localhost;
        charset utf-8;

		proxy_connect_timeout 180;
        proxy_send_timeout 180;
        proxy_read_timeout 180;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarder-For $remote_addr;
		
		# 指向umeditor目錄
        location / {
            root   umeditor;
            index  index.html index.htm;
        }
        # 代理到8080端口
		location /sys {
            proxy_pass   http://127.0.0.1:8080;
        }
		
    }

5、訪問
UMeditor的集成比較簡單
啓動nginx,訪問http://127.0.0.1:8076,就可以使用UMeditor了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章