Design and Implementation of an Online Course Purchase System(13)

Complete the image upload function

Posted by Chen Xingxu on June 3, 2020

易课寄在线购课系统开发笔记(十三)–完成图片上传功能

功能分析

使用的是 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

业务逻辑

  1. 接收页面传递的图片信息 uploadFile
  2. 把图片上传到图片服务器,使用封装的工具类实现,需要取文件的内容和扩展名。
  3. 图片服务器返回图片的 url
  4. 将图片的 url 补充完整,返回一个完整的 url。
  5. 把返回结果封装到一个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 控件中。