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; } }
iceEditor富文本上传图片,后台接口如何用java实现
于 2022-04-08 15:40:35 首次发布