易课寄在线购课系统开发笔记(十三)–完成图片上传功能
功能分析
使用的是 KindEditor 的多图片上传插件。KindEditor 4.x 文档
请求的 url:/pic/upload
参数:MultiPartFile uploadFile
返回值:
//成功时
{
"error":0,
"url":"http://www.example.com/path/to/file.txt"
}
//失败时
{
"error":1,
"message":"错误信息"
}
可以创建一个 pojo 对应返回值。可以使用map
业务逻辑:
- 接收页面传递的图片信息 uploadFile
- 把图片上传到图片服务器,使用封装的工具类实现,需要取文件的内容和扩展名。
- 图片服务器返回图片的 url
- 将图片的 url 补充完整,返回一个完整的 url。
- 把返回结果封装到一个Map对象中返回。
需要把 commons-io、fileupload 的 jar 包添加到工程中。
配置多媒体解析器。
<!-- 配置多媒体解析器 -->
<!-- 定义文件上传解析器 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 设定默认编码 -->
<property name="defaultEncoding" value="UTF-8"></property>
<!-- 设定文件上传的最大值5MB,5*1024*1024 -->
<property name="maxUploadSize" value="5242880"></property>
</bean>
Controller
package cn.ecourses.controller;
//图片上传处理Controller
@Controller
public class PictureController {
@Value("${IMAGE_SERVER_URL}")
private String IMAGE_SERVER_URL;
@RequestMapping(value="/pic/upload", produces=MediaType.TEXT_PLAIN_VALUE+";charset=utf-8")
@ResponseBody
public String uploadFile(MultipartFile uploadFile) {
try {
//把图片上传的图片服务器
FastDFSClient fastDFSClient = new FastDFSClient("classpath:conf/client.conf");
//取文件扩展名
String originalFilename = uploadFile.getOriginalFilename();
String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
//得到一个图片的地址和文件名
String url = fastDFSClient.uploadFile(uploadFile.getBytes(), extName);
//补充为完整的url
url = IMAGE_SERVER_URL + url;
//封装到map中返回
Map result = new HashMap<>();
result.put("error", 0);
result.put("url", url);
return JsonUtils.objectToJson(result);
} catch (Exception e) {
e.printStackTrace();
Map result = new HashMap<>();
result.put("error", 1);
result.put("message", "图片上传失败");
return JsonUtils.objectToJson(result);
}
}
}
解决浏览器兼容性的问题
KindEditor 的图片上传插件,对浏览器兼容性不好。
使用 @ResponseBody 注解返回 Java 对象,Content-Type:application/json;charset=UTF-8
返回字符串时,Content-Type:text/plan;charset=UTF-8
指定响应结果的 content-type:
现在上传插件最后响应的 content-type 是 text/plan 格式的 JSON 字符串,兼容性是最好的。
富文本编辑器的使用方法
在 jsp 中引入 KindEditor 的 css 和 js 代码。
在表单中添加一个 textarea 控件。是一个富文本编辑器的载体,类似数据源。
初始化富文本编辑器,使用官方提供的方法初始化。
取富文本编辑器的内容。
表单提交之前,把富文本编辑器的内容同步到 textarea 控件中。