富文本上传图片 java 代码图片路径返回页面是undefined的问题

最新推荐文章于 2023-05-08 11:13:09 发布

原创最新推荐文章于 2023-05-08 11:13:09 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

编程之路专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个关于文件上传功能中JSON格式变化的问题，并分享了解决方案。最初，项目使用String格式返回上传结果，后因JSON格式异常转为Map格式解决。

页面采用Layui的富文本格式，之前上传的java代码是将数据以json的字符串形式传给页面，没有问题，代码如下

@ResponseBody
    @RequestMapping(value = "/uploadFile")
    public String  uploadFile(HttpServletRequest request, @Param("file") MultipartFile file) throws IOException {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");
        String res = sdf.format(new Date());
        //服务器上使用
         String rootPath =request.getServletContext().getRealPath("/uploads/");//target的目录
//        //本地使用
//        String rootPath = "/Users/liuyanzhao/Documents/uploads/";
        //原始名称
        String originalFilename = file.getOriginalFilename();
        //新的文件名称
        String newFileName = res + originalFilename.substring(originalFilename.lastIndexOf("."));
        //创建年月文件夹
        Calendar date = Calendar.getInstance();
        File dateDirs = new File(date.get(Calendar.YEAR)
                + File.separator + (date.get(Calendar.MONTH) + 1));
        //新文件
        File newFile = new File(rootPath + File.separator + dateDirs + File.separator + newFileName);
        //判断目标文件所在的目录是否存在
        if (!newFile.getParentFile().exists()) {
            //如果目标文件所在的目录不存在，则创建父目录
            newFile.getParentFile().mkdirs();
        }
        System.out.println(newFile);
        //将内存中的数据写入磁盘
        file.transferTo(newFile);
        //完整的url
        String fileUrl = "/basaltsign/uploads/" + date.get(Calendar.YEAR) + "/" + (date.get(Calendar.MONTH) + 1) + "/" + newFileName;
        Map<String, Object> map = new HashMap<String, Object>();
        Map<String, Object> map2 = new HashMap<String, Object>();
        map.put("code", 0);//0表示成功，1失败
        map.put("msg", "上传成功");//提示消息
        map.put("data", map2);
        map2.put("src", fileUrl);//图片url
        map2.put("title", newFileName);//图片名称，这个会显示在输入框里
        String result = new JSONObject(map).toString();

        //System.out.println("map=="+map);
        return result;

后来项目修改几个功能，偶然测试了一下上传图片结果发现result 返回给页面的数据格式变样了不是标准的json格式了

result=={"msg":"上传成功","code":0,"data":"{src=/basaltsign/uploads/2018/4/20180425171450856.jpg, title=20180425171450856.jpg}"}

仔细看会发现 data对应的值不是json格式的而是双引号括起来的字符串。所以页面是收不到值的。我很纳闷我什么都没改为什么json格式变样了？这让我怎么办。后来我无意间将返回的result 变成map格式。代码如下

 /**
     *    富文本 上传文件
     */
    @ResponseBody
    @RequestMapping(value = "/uploadFile")
    public Map uploadFile(HttpServletRequest request, @Param("file") MultipartFile file) throws IOException {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");
        String res = sdf.format(new Date());
        //服务器上使用
         String rootPath =request.getServletContext().getRealPath("/uploads/");//target的目录
//        //本地使用
//        String rootPath = "/Users/liuyanzhao/Documents/uploads/";
        //原始名称
        String originalFilename = file.getOriginalFilename();
        //新的文件名称
        String newFileName = res + originalFilename.substring(originalFilename.lastIndexOf("."));
        //创建年月文件夹
        Calendar date = Calendar.getInstance();
        File dateDirs = new File(date.get(Calendar.YEAR)
                + File.separator + (date.get(Calendar.MONTH) + 1));
        //新文件
        File newFile = new File(rootPath + File.separator + dateDirs + File.separator + newFileName);
        //判断目标文件所在的目录是否存在
        if (!newFile.getParentFile().exists()) {
            //如果目标文件所在的目录不存在，则创建父目录
            newFile.getParentFile().mkdirs();
        }
        System.out.println(newFile);
        //将内存中的数据写入磁盘
        file.transferTo(newFile);
        //完整的url
        String fileUrl = "/basaltsign/uploads/" + date.get(Calendar.YEAR) + "/" + (date.get(Calendar.MONTH) + 1) + "/" + newFileName;
        Map<String, Object> map = new HashMap<String, Object>();
        Map<String, Object> map2 = new HashMap<String, Object>();
        map.put("code", 0);//0表示成功，1失败
        map.put("msg", "上传成功");//提示消息
        map.put("data", map2);
        map2.put("src", fileUrl);//图片url
        map2.put("title", newFileName);//图片名称，这个会显示在输入框里
        //String result = new JSONObject(map).toString();

        System.out.println("map=="+map);
        return map;
    }

返回给页面数据变成了这样

map=={msg=上传成功, code=0, data={src=/basaltsign/uploads/2018/4/20180425172004551.jpg, title=20180425172004551.jpg}}

你会发现data 的值没有了双引号。

现在有个问题我就郁闷了，之前发布到服务器的项目是以String格式返回数据的目前是正常还能上传图片。现在更新的项目只能以map格式返回数据才能正常上传。百思不得其解，有知道的大神不防告诉小弟