weixin_44496250
weixin_44496250
2019-03-23 14:02

使用layui的富文本编辑器 上传图片后不能显示图片 只能显示图片名

  • spring
  • java
  • maven
  • json
  • java-ee

图片说明图片说明

历史
请输入历史
                <input type="hidden" id="introCont">
            </div>


<!--编辑器-->
<script>
    layui.use(['layedit','form'], function(){
        var layedit = layui.layedit,$ = layui.jquery,form = layui.form;
        //构建一个默认的编辑器
        layedit.set({
            uploadImage: {
                url: '/File/uploadImg',
            type: 'post'
        }
    });
        var index = layedit.build('history',{tool: [
            'strong' //加粗
            ,'italic' //斜体
            ,'underline' //下划线
            ,'del' //删除线
            ,'|' //分割线
            ,'left' //左对齐
            ,'center' //居中对齐
            ,'right' //右对齐
            ,'link' //超链接
            ,'unlink' //清除链接
            ,'face' //表情
            ,'image' //插入图片
//            ,'help' //帮助
        ]});

        //自定义验证规则
        form.verify({
            history: function(value){
                if(value.length < 0){
                    return '历史不能为空';
                }
            }
            ,article_desc: function(value){
                layedit.sync(index);
            }
        });

        //编辑器外部操作
        var active = {
            content: function(){
                //alert(layedit.getContent(index)); //获取编辑器内容
                var str = layedit.getContent(index);
                //赋值到隐藏的标签
                $("#introduce").val(""+ str +"");
                //console.log("视频简介内容:"+ $("#introCont").val())
            }
        };

        $('.layui-textarea').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

package com.yunce.web.controller;

import com.yunce.web.Setting;
import com.yunce.web.utils.FileUpload;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

/**

  • Created by Administrator on 2019/3/22.
    */
    @Controller
    @RequestMapping(value = "/File")
    public class FileController {

    public static Logger LOG = LoggerFactory.getLogger(FileController.class);
    @Autowired
    private Setting setting;

    @RequestMapping(value = "/uploadImg", method = RequestMethod.POST)
    @ResponseBody
    public Map uploadImg(@RequestParam (value = "file")MultipartFile[] files, HttpServletRequest request) {
    String url = setting.local_url;
    String saveFilePath = setting.image_dir;
    Map map = new HashMap<>();
    Map data = new HashMap<>();
    for (int i = 0, length = files.length; i < length; i++) {
    if (files[i] != null && !files[i].isEmpty()) {
    LOG.info("图片大小:" + files[i].getSize() / 1024 + "KB");
    //获取图片的文件名
    String fileName = files[i].getOriginalFilename();
    //获取图片的扩展名
    String extensionName = fileName.substring(fileName.lastIndexOf(".") + 1);
    //新的图片文件名 = 年月日+随机数 +"."图片扩展名
    String dateStr = new SimpleDateFormat("yyyyMMdd").format(new Date());
    Integer num = (int) ((Math.random() * 9 + 1) * 100000);

            String newFileName = String.valueOf(dateStr + num) + "." + extensionName;
            FileUpload.saveFile(newFileName, files[i], saveFilePath);
            url = url + "/" + newFileName;
            data.put("src", url);
            data.put("title", newFileName);
            map.put("code", 0);
            map.put("msg", "上传成功");
            map.put("data", data);
        }
    }
    return map;
    

    }
    }
    /* String tempPath="f:/upload";
    Map map=new HashMap<>();
    Map data=new HashMap<>();
    String oldName=file.getOriginalFilename();
    System.out.println("图片名字:oldName is:"+oldName);
    String tempName = System.currentTimeMillis() + "";
    System.out.println("tempName is:" +tempName);
    //以文件名命名的文件夹
    String tempFileDir = tempPath + "/" + tempName;
    File parentFileDir = new File(tempFileDir);
    //若不存在 就新建
    if (!parentFileDir.exists()) {
    parentFileDir.mkdirs();
    }
    //新文件名 获取当前名+文件后缀
    String newName = tempName + oldName.substring(oldName.lastIndexOf("."));
    //数据库img的src
    String src="/upload/"+tempName+"/"+newName;
    System.out.println("图片名字:newName is:"+newName);
    try {
    //存放文件 (文件名,文件)
    file.transferTo(new File(tempFileDir,newName));
    } catch (IllegalStateException e) {
    e.printStackTrace();
    } catch (IOException e) {
    e.printStackTrace();
    }*/

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

2条回答