iceEditor富文本上传图片,后台接口如何用java实现

package ********;
import org.apache.catalina.servlet4preview.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.util.*;
/**
 * 文件上传
 * @author 欢小仙
 * @Date 2022/4/8
 */
@Controller
@RequestMapping("/file")
public class FileUploadController {
    /**
     * html代码 :
     *     略
     * js 代码:
     * <script>
     *   var e= new ice.editor("content",function(e){
     *    e.uploadUrl='http://127.0.0.1:8081/file/layeditUploadText';
     *      e.create();
     * })
     * script>
     *      
     * java 
     * 代码:     
     *      看过大佬写的iceEditor.js源码相信相信小伙伴对这个组件了解的七七八八了吧,
     *       这个组件很牛就不用说了吧
     * 分析:     
     *       实现图片上传,我们需要知道前端给后端传什么参数,无非就俩种情况
     *       1.File 对象 2.MultipartFile 对象
     *       当前端请求接口时候前端会把这俩个当作请求参数发给我们,我们后台获取到就可以了
     *  操作:
     *      1.后台通过@RequestParam("file[]") MultipartFile[] pictures 接到MultipartFile对象然后通过IO流实现文件读写即可
     *        建议大家多看一下大佬的iceEditor.js源码 中的1029-1069   特别是1039行代码  89-94 变量的初始化
     *       1067行就是通过ajax 发送请求 ,也就是我们在js中先初始化组件在设置请求访问接口的路径e.uploadUrl='http://127.0.0.1:8081/file/layeditUploadText';
     *      2.将拿到的图片通过UUID重新生成名字,以防止名字重复
     *      3.ToolUtil.getFileSuffix() 自己写了一个工具类就是去后缀名而已
     *      4.ROOT_PATH、PUBLIC_PATH  这是我在yml在取得一些配置(就是路径)大家可以根据自己的来写
     *      5.按照大佬的说法最后返回一个包含属性error、url、name的集合就可以实现图片上传了
     *  优化:
     *      我没有添加一些健壮性判断,比如图片太大导致出现的一些异常,等等
     **/
@Value("${guns.file-upload-path}")
private String ROOT_PATH;
@Value("${guns.file-upload-path-public}")
private String PUBLIC_PATH;


@RequestMapping("/layeditUploadText")
@ResponseBody
public List<Map<String,Object>> fileUpload(HttpServletRequest request, @RequestParam("file[]") MultipartFile[] pictures) {
        List<Map<String,Object> lists = new ArrayList>();
        String [] arr=new String[pictures.length];
        for(int a=0;a<arr.length;a++){
        arr[a] = UUID.randomUUID().toString() + "." + ToolUtil.getFileSuffix(pictures[a].getOriginalFilename());
        }
        //创建文件夹生成地点
        File dir = new File(ROOT_PATH+PUBLIC_PATH);
        if(!dir.exists()) {
        dir.mkdirs();
        }
        //将文件通过io流写写入指定磁盘位置或者服务器中
        try {
        for(int a=0;alength;a++){
        pictures[a].transferTo(new File(dir+"/"+arr[a]));
        //创建返回响应对象
        Map map=new HashMap<>();
        map.put("error",0);
        map.put("url",PUBLIC_PATH+"/"+arr[a]);
        map.put("name",arr[a]);
        lists.add(map);
        }
        } catch (Exception e) {
        throw new GunsException(BizExceptionEnum.UPLOAD_ERROR);
        }
        return lists;
        }
   }
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值