FastDFS 图片上传功能实现
2017-10-12 23:56
369 查看
1.功能分析
我们使用KindEditor的多图片上传插件,具体使用参考:http://kindeditor.net/doc.php
2.业务逻辑分析:
(1) 接收页面传递的图片信息uploadFile
(2) 把图片上传到图片服务器。使用封装的工具类实现。需要取文件的内容和扩展名。
(3) 图片服务器返回图片的url
(4) 将图片的url补充完整,返回一个完整的url。
(5) 把返回结果封装到一个Map对象中返回。
3.后台具体使用
(1) 把commons-io、fileupload 的jar包添加到工程中。
(2) 配置多媒体解析器。
(3) Controller
4.解决浏览器兼容性的问题
KindEditor的图片上传插件,对浏览器兼容性不好,使用@ResponseBody注解返回java对象:Content-Type:application/json;charset=UTF-8。
(1) 返回字符串时:Json格式
(2) 指定响应结果的Content-Type:text/plain;charset=UTF-8
(3) KindEditor的多图片上传插件最后响应的content-type是text/plan格式的json字符串。兼容性是最好的。
(4) Json与其他数据的相互转换,在以后用到使用该工具类即可。
我们使用KindEditor的多图片上传插件,具体使用参考:http://kindeditor.net/doc.php
2.业务逻辑分析:
(1) 接收页面传递的图片信息uploadFile
(2) 把图片上传到图片服务器。使用封装的工具类实现。需要取文件的内容和扩展名。
(3) 图片服务器返回图片的url
(4) 将图片的url补充完整,返回一个完整的url。
(5) 把返回结果封装到一个Map对象中返回。
3.后台具体使用
(1) 把commons-io、fileupload 的jar包添加到工程中。
(2) 配置多媒体解析器。
<!-- 定义文件上传解析器 --> <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>
(3) Controller
@Controller public class PictureController { @Value("${IMAGE_SERVER_URL}") private String IMAGE_SERVER_URL; @RequestMapping("/pic/upload") @ResponseBody public Map fileUpload(MultipartFile uploadFile) { try { //1、取文件的扩展名 String originalFilename = uploadFile.getOriginalFilename(); String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1); //2、创建一个FastDFS的客户端 FastDFSClient fastDFSClient = new FastDFSClient("classpath:resource/client.conf"); 4000 //3、执行上传处理 String path = fastDFSClient.uploadFile(uploadFile.getBytes(), extName); //4、拼接返回的url和ip地址,拼装成完整的url String url = IMAGE_SERVER_URL + path; //5、返回map Map result = new HashMap<>(); result.put("error", 0); result.put("url", url); return result; } catch (Exception e) { e.printStackTrace(); //5、返回map Map result = new HashMap<>(); result.put("error", 1); result.put("message", "图片上传失败"); return result; } } }
4.解决浏览器兼容性的问题
KindEditor的图片上传插件,对浏览器兼容性不好,使用@ResponseBody注解返回java对象:Content-Type:application/json;charset=UTF-8。
(1) 返回字符串时:Json格式
(2) 指定响应结果的Content-Type:text/plain;charset=UTF-8
(3) KindEditor的多图片上传插件最后响应的content-type是text/plan格式的json字符串。兼容性是最好的。
(4) Json与其他数据的相互转换,在以后用到使用该工具类即可。
import java.util.List; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.JavaType; import com.fasterxml.jackson.databind.JsonNode; import com.fasterxml.jackson.databind.ObjectMapper; /** * 自定义响应结构 */ public class JsonUtils { // 定义jackson对象 private static final ObjectMapper MAPPER = new ObjectMapper(); /** * 将对象转换成json字符串。 * <p>Title: pojoToJson</p> * <p>Description: </p> * @param data * @return */ public static String objectToJson(Object data) { try { String string = MAPPER.writeValueAsString(data); return string; } catch (JsonProcessingException e) { e.printStackTrace(); } return null; } /** * 将json结果集转化为对象 * * @param jsonData json数据 * @param clazz 对象中的object类型 * @return */ public static <T> T jsonToPojo(String jsonData, Class<T> beanType) { try { T t = MAPPER.readValue(jsonData, beanType); return t; } catch (Exception e) { e.printStackTrace(); } return null; } /** * 将json数据转换成pojo对象list * <p>Title: jsonToList</p> * <p>Description: </p> * @param jsonData * @param beanType * @return */ public static <T>List<T> jsonToList(String jsonData, Class<T> beanType) { JavaType javaType = MAPPER.getTypeFactory().constructParametricType(List.class, beanType); try { List<T> list = MAPPER.readValue(jsonData, javaType); return list; } catch (Exception e) { e.printStackTrace(); } return null; } }
相关文章推荐
- fastdfs 新添加一个项目的图片目录 实现独立的上传下载功能
- 【TaoTao】Nginx+FastDFS实现图片上传功能
- struts2 图片上传至服务器 页面预览及页面及时图片预览功能实现方式
- 微信小程序实现图片上传功能实例(前端+PHP后端)
- HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(二)
- 实现sharepoint 内容编辑器直接上传图片功能
- 学习淘淘商城第二十课(实现图片上传功能)
- 基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)
- 实现图片上传并显示到浏览器功能
- Android编程实现图片的上传和下载功能示例
- VUE + UEditor 单图片跨域上传功能的实现方法
- 微信小程序实现图片上传、删除和预览功能的方法
- java通过模拟post方式提交表单实现图片上传功能实例
- HTML5本地拖拽上传实现图片预览功能的实践总结
- Android实现图片(拍照+相册)上传功能
- 微信小程序实现上传图片功能
- .Net语言 APP开发平台——Smobiler学习日志:快速实现应用中的图片、声音等文件上传功能
- 如何实现无刷新安全图片上传功能
- 使用ThinkPHP+Uploadify实现图片上传功能
- ajax图片上传功能的实现