别人是什么都懂,然后写上代码教大家怎么做,而我只是一个被自己蠢哭的啥都不会的yang
今天我就来告诉大家,被自己蠢哭是啥意思
- springboot实现图片上传,我以前不知道原来是有kindeditor这个html在线编辑器
大概长这样,这只是部分截图啊,红圈那个就是多图片上传的按钮
- 尽然有这个,那就引入被
http://kindeditor.net/demo.php
要在页面实现上面的样子,首先你要在XXXX.html里面引入textare俗称富文本编辑,代码如下:
<div class="form-group">
<textarea id="editor" style="width: 100%; height: 650px;"
th:utext="${info!=null and info.DetailContent !=null}?${info.DetailContent}: ''"></textarea>
</div>
然后就是在upFile.js中这样写
KindEditor.ready(function(K){
editor = K.create("textarea[id='editor']",{
resizeType : 1,
allowPreviewEmoticons: false,
allowImageUpload:true,//允许上传图片
allowFileManager:true, //允许对上传图片进行管理
uploadJson: '/admin/upload/file', //上传图片的java代码
fileManagerJson: '/admin/upload/file',
afterUpload: function(){this.sync();}, //图片上传后,将上传内容同步到textarea中
afterBlur: function(){this.sync();}, 失去焦点时,将上传内容同步到textarea中
items : [
'fontname','fontsize', '|','forecolor', 'hilitecolor','bold', 'italic','underline',
'removeformat','|', 'justifyleft','justifycenter', 'justifyright','insertorderedlist',
'insertunorderedlist','|', 'emoticons','link','media','|','multiimage', 'table', 'baidumap'],
filePostName:'file'
});
})
然后就是controller.java了
@PostMapping({"/upload/file"})
@ResponseBody
public ApiResult upload(HttpServletRequest httpServletRequest, @RequestParam("file") MultipartFile file) throws URISyntaxException {
String fileName = file.getOriginalFilename();
String suffixName = fileName.substring(fileName.lastIndexOf("."));
//生成文件名称通用方法
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd_HHmmss");
Random r = new Random();
StringBuilder tempName = new StringBuilder();
tempName.append(sdf.format(new Date())).append(r.nextInt(100)).append(suffixName);
String newFileName = tempName.toString();
File fileDirectory = new File(Constants.FILE_UPLOAD_DIC);
//创建文件,这里Costants是一个常量配置的java文件,FILE_UPLOAD_DIC是自定义地址eg:'D:\\upload\\'
File destFile = new File(Constants.FILE_UPLOAD_DIC + newFileName);
try {
if (!fileDirectory.exists()) {
fileDirectory.getParentFile().mkdir();
if (!fileDirectory.mkdir()) {
throw new IOException("文件夹创建失败,路径为:" + fileDirectory);
}
}
file.transferTo(destFile);
//这里是json格式的东西,你也可以返回一个实体,网上方法挺多的
ApiResult resultSuccess = ResultGenerator.genSuccessResult();
resultSuccess.setData(JrunningUtils.getHost(new URI(httpServletRequest.getRequestURL() + "")) + "/api/public/images/" + newFileName);
System.out.println("图片上传成功");
return resultSuccess;
} catch (IOException e) {
e.printStackTrace();
return ResultGenerator.genFailResult("文件上传失败");
}
}
- 然后就是启动项目了
问题解决来了
点完开始上传。然后就成这样了
一看后端控制台,sout输出的“图片上传成功”也在啊。
看了一下kindEditor-all.js
看了我的ResultGenerator.genFailResult返回的json没有err啊
然后我就改成这样了
再启动,我mmp,一天了终于出来了
心情美美哒,然后CSDN记录一下