day70_淘淘商城项目_03_商品类目选择 + 图片上传 + 图片服务器FastDFS + 富文本编辑器KindEditor + 新增商品_匠心笔记 (9)

KindEditor的图片上传插件,对浏览器兼容性不好,不能使用JSON响应。

day70_淘淘商城项目_03_商品类目选择 + 图片上传 + 图片服务器FastDFS + 富文本编辑器KindEditor + 新增商品_匠心笔记


使用@ResponseBody注解返回java对象实际上是JSON格式的数据。
  返回JSON格式的数据时的Content-Type为:application/json;charset=UTF-8 在火狐上测试不行。
  返回字符串时的Content-Type为:text/plain;charset=UTF-8 它是可以成功返回的。火狐浏览器支持。
可以通过produces指定响应结果的content-type:
  @RequestMapping(value="/pic/upload",produces=MediaType.TEXT_PLAIN_VALUE+";charset=utf-8")
需要使用JsonUtils工具类将对象转换成JSON格式的字符串。将其拷贝到taotao-common项目中,安装到本地仓库。
修改代码如下: @Controller
public class PictureController {

    @Value("${TAOTAO_IMAGE_SERVER_URL}"// 使用注解取出配置文件的值
    private String TAOTAO_IMAGE_SERVER_URL;

    /**
     * 上传图片
     * @param uploadFile
     * @return
     */

    @RequestMapping(value="/pic/upload", produces=MediaType.TEXT_PLAIN_VALUE + ";charset=UTF-8")
    @ResponseBody // 在后台,把JavaBean强制转换成json格式数据返回给前台页面。
    public String PictureUpload(MultipartFile uploadFile) {
        try {
            // 1、取出文件的扩展名
            String originalFilename = uploadFile.getOriginalFilename();
            String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
            // 2、使用工具类创建一个FastDFS的客户端
            FastDFSClientUtil fastDFSClientUtil = new FastDFSClientUtil("classpath:resource/fdfs_client.conf");
            // 3、执行上传处理,返回的字符串:group1/M00/00/01/wKgZhVjnAd6AKj_RAAvqH_kipG8211.jpg
            String path = fastDFSClientUtil.uploadFile(uploadFile.getBytes(), extName);
            // 4、拼接返回的url和ip地址,拼装成完整的url
            // String url = "http://192.168.25.133/" + path;
            String url = TAOTAO_IMAGE_SERVER_URL + path;
            // 5、返回map,设置上传成功后的图片的路径
            Map<StringObject> result = new HashMap<>();
            result.put("error"0);
            result.put("url", url);
            // 6、返回
            return JsonUtils.objectToJson(result);
        } catch (Exception e) {
            e.printStackTrace();
            // 5、返回map,设置上传失败错误信息
            Map<StringObject> result = new HashMap<>();
            result.put("error"1);
            result.put("message""图片上传失败");
            return JsonUtils.objectToJson(result);
        }
    }
}
8、富文本编辑器的使用方法 8.1、富文本编辑器介绍

day70_淘淘商城项目_03_商品类目选择 + 图片上传 + 图片服务器FastDFS + 富文本编辑器KindEditor + 新增商品_匠心笔记


KindEditor
  
UEditor:百度编辑器
  
CKEditor
  
富文本编辑器纯js开发,跟后台语言没有关系。 8.2、使用方法

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwwsgw.html