美文网首页Java学习笔记IT@程序员猿媛程序员
图片上传解决浏览器兼容性的问题

图片上传解决浏览器兼容性的问题

作者: 您好简书 | 来源:发表于2019-08-11 12:12 被阅读5次

KindEditor的图片上传插件,对浏览器兼容性不好。
使用@ResponseBody注解返回java对象,
Content-Type:application/json;charset=UTF-8

应该让其返回

在camel-dspt-common 添加工具类JsonUtils.java

package com.camel.common.utils;

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;
    }
    
}

返回字符串时:
Content-Type:text/plain;charset=UTF-8

image.png

指定响应结果的content-type:

image.png

KindEditor的多图片上传插件最后响应的content-type是text/plan格式的json字符串。兼容性是最好的。

image.png
package com.camel.controller;

import java.awt.PageAttributes.MediaType;
import java.util.HashMap;
import java.util.Map;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.camel.common.utils.FastDFSClient;
import com.camel.common.utils.JsonUtils;

@Controller
public class PictureController {
    @Value("${IMAGE_SERVER_URL}")
    private String IMAGE_SERVER_URL;

    @RequestMapping(value="/pic/upload",produces=org.springframework.http.MediaType.TEXT_PLAIN_VALUE+";charset=utf-8")
    @ResponseBody
    public String fileUpload(MultipartFile uploadFile){
        
        try {
            //1、取文件的扩展名
            String originalFilename = uploadFile.getOriginalFilename();
            String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
            //2、创建一个FastDFS的客户端
            FastDFSClient fastDFSClient = new FastDFSClient("classpath:conf/client.conf");
            //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 JsonUtils.objectToJson(result);
        } catch (Exception e) {
            e.printStackTrace();
            //5、返回map
            Map result = new HashMap<>();
            result.put("error", 1);
            result.put("message", "图片上传失败");
            return JsonUtils.objectToJson(result);
        }
    }

        
        
        
        
    
}

相关文章

  • 图片上传解决浏览器兼容性的问题

    KindEditor的图片上传插件,对浏览器兼容性不好。使用@ResponseBody注解返回java对象,Con...

  • 常见的浏览器兼容性问题+常用 hack 技巧

    常见的浏览器兼容性问题和解决方法 png24 位的图片在IE6 浏览器上出现背景。解决方案:将图片做成png8 位...

  • 浏览器兼容性问题及解决方案(JS部分)

    关于浏览器兼容性问题的姊妹篇《浏览器兼容性问题及解决方案(CSS部分)》请点击这里。 常见的JS兼容性部分的问题有...

  • 移动端开头

    移动端开头 2.解决360浏览器兼容性问题

  • 图片上传bug

    碰到一个图片上传的问题,有的图片上传成功,有的上传失败,浏览器控制台报图片地址404,但是复制地址从浏览器打开又是...

  • [Ueditor] 上传图片成功,但是提示上传失败

    问题排除 查找图片发现上传的图片已经上传于服务器,因为不是图片上传的问题 浏览器F12开发者模式查...

  • ajax

    解决浏览器兼容性问题 if (window.XMLHttpRequest){ // IE7+, Firefox, ...

  • JS、Jquery获取浏览器信息

    1、背景在做前端开发时,经常需要解决浏览器兼容性问题,要解决这个问题就先得判断浏览器类型及版本,本人做过几次,因为...

  • 浏览器常见的兼容问题

    什么是浏览器的兼容问题 浏览器的兼容性问题也就是网页的兼容性或者网站兼容性问题, 指网页在各种浏览器上的cs...

  • 浏览器兼容性

    一、什么是浏览器兼容性 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一...

网友评论

    本文标题:图片上传解决浏览器兼容性的问题

    本文链接:https://www.haomeiwen.com/subject/xnwjjctx.html