• 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

     

  • 相关阅读:
    Mac sublime text3 安装插件
    趣题记录
    Shadow DOM及自定义标签
    JavaScript 对象部署 Iterator 接口
    JavaScript实现循环链表
    使用JavaScript实现单向链表
    nodejs深入浅出读书笔记(三)
    nodejs深入浅出读书笔记(一)
    nodejs深入浅出读书笔记(二)
    为什么要了解Event loop?(二)
  • 原文地址:https://www.cnblogs.com/GengMingYan/p/15831880.html
Copyright © 2020-2023  润新知