First of all, I would like to thank the original author of this article. He is a very good partner of mine. This article was originally created by him.
Earlier we learned about image uploading, but this kind of uploading only belongs to UEditor's online uploading. The uploaded images are stored in the container. Next, we will learn how to upload them to the real folder (server),
Upload image to folder (server)
1. Modify the config.js configuration file URL to the root directory of the plugin, usually an absolute path.
2. Modify the access path prefix in the upload image configuration item in config.json to the project name, and modify the upload file path and access path according to the situation. After the configuration is correct, UEditor has the upload function to help us upload pictures. However, the upload path will be in the temporary folder of the project deployment. After tomcat is undeployed, the upload file will be deleted together with the project deployment file.
3. To upload pictures to a custom path, be careful not to appear in Chinese when processing the uploaded file name, or you need to do processing to read the file correctly!
4. (1) First override the method of UEidtor to get the path in jsp
| // Override the method of getting the path in UEditor UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; UE.Editor.prototype.getActionUrl = function(action) { // Judgment path here is the action name set in config.json to execute the upload if (action == 'uploadimage') { return'http://localhost:8080/maven-web/uploadImage.do'; } elseif (action == 'uploadvideo') { return''; } else { returnthis._bkGetActionUrl.call(this, action); } } |
(2) Configure in the springmvc configuration file
| <!-- Upload configuration --> <beanid="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="UTF-8"></property> </bean> |
在controller中定义上传和读取文件的方法
* SpringMVC 用的是 的MultipartFile来进行文件上传
* 这里用@RequestParam()来指定上传文件为MultipartFile
* @throws IOException
*/
@RequestMapping("uploadImage")
@ResponseBody
public Map<String,String> uploadImage(@RequestParam("upimage") CommonsMultipartFile upimage,HttpServletRequest request) throws IOException{
//文件原名称
String fileName=upimage.getOriginalFilename();
//为了避免重复简单处理
String nowName=new Date().getTime()+"_" + fileName;
if(!upimage.isEmpty()){
//上传位置路径
String path0 = "D:\\eclipseworkspace\\maven-web\\src\\main\\webapp\\upload\\"+nowName;
//按照路径新建文件
File newFile = new File(path0);
//复制
FileCopyUtils.copy(upimage.getBytes(), newFile);
}
//返回结果信息(UEditor需要)
Map<String,String> map = new HashMap<String,String >();
//是否上传成功
map.put("state", "SUCCESS");
//现在文件名称
map.put("title", nowName);
//文件原名称
map.put("original", fileName);
//文件类型 .+后缀名
map.put("type", fileName.substring(upimage.getOriginalFilename().lastIndexOf(".")));
//文件路径
map.put("url", "/"+nowName+"/getImage.do");
//文件大小（字节数）
map.put("size", upimage.getSize()+"");
return map;
}
/**
* 读取文件
*/
@RequestMapping("{imgName}/getImage")
public void readImg(@PathVariable("imgName") String imgName, HttpServletResponse response)
throws Exception {
//设置文件的返回类型
response.setContentType("image/*");
//文件路径(windows下是\\，linux下是//，都必须是绝对路径)
String imgPath="D:\\eclipseworkspace\\maven-web\\src\\main\\webapp\\upload\\"+imgName;
//java中用File类来表示一个文件
File image = new File(imgPath);
//测试这个文件路径是否存在（也就是这个文件是否存在）
if (!image.exists()) {
return;
}
//FileUtils.readFileToByteArray(File file)把一个文件转换成字节数组返回
response.getOutputStream().write(FileUtils.readFileToByteArray(image));
//java在使用流时,都会有一个缓冲区,按一种它认为比较高效的方法来发数据:
//把要发的数据先放到缓冲区,缓冲区放满以后再一次性发过去,而不是分开一次一次地发.
//而flush()表示强制将缓冲区中的数据发送出去,不必等到缓冲区满.
response.getOutputStream().flush();
response.getOutputStream().close();
}
本文 上传方法里的@RequestParam("upimage")的参数,是Controller.json中的imageFieldName的值,这里的方法也都是自己定义.
String imgPath="D:\\eclipseworkspace\\maven-web\\src\\main\\webapp\\upload\\"+imgName; 这一项是自己存放图片的绝对路径!
UEditor的知识就到这里,转载请标明出处,谢谢合作!