富文本编辑器中上传图片 显示不出来

提问 未结 8 210
语下言心
悬赏:20飞吻
版本:layui 2.4.5 浏览器:谷歌 76.0.3809.100
前台:
    layui.use(['layedit','layer','element'], function() {
var layedit = layui.layedit
, $ = layui.jquery
, layer = layui.layer
,element = layui.element

/*图片接口*/
layedit.set({
uploadImage: {
url: 'picture' //接口url
,type: 'post'//默认post
}
});
//构建一个默认的编辑器layer
var index = layedit.build('LAY_demo1');
后台 :
@Controller
@RequestMapping("Article_us")
public class Artcle_usController {

@Autowired
public Artcle_usServiceImpl Artcle_usService;

@RequestMapping(value = "picture",method = RequestMethod.POST)
@ResponseBody
public String uploadImage(HttpServletRequest request, @Param("file")MultipartFile file) throws IOException {

SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");
String res = sdf.format(new Date());
//服务器上使用
// String rootPath =request.getServletContext().getRealPath("/resource/uploads/");//target的目录
//本地使用
String rootPath ="D:/IDEA/Project_2/ssmcreater-master/ssmcreater-master/src/main/webapp/statics/";
//原始名称
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 = "../statics/"+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(result);
return result;
}
原因:富文本编辑器中,图片上传时一直报404,说返回的地址出来错误,
图片地址:D:\IDEA\Project_2\ssmcreater-master\ssmcreater-master\src\main\webapp\statics\2019\8\20190809104909966.jpg
后台返回的json:
{"msg":"上传成功","code":0,"data":{"src":"..\/statics\/2019\/8\/20190809104909966.jpg","title":"20190809104909966.jpg"}}

前台一直报找不到:
复制出来访问不到
http://localhost:8080/statics/2019/8/20190809104909966.jpg


如何直接访问:http://localhost:8080/statics/2019/8/20190809104909966.jpg
就可以访问
回帖
  • 能把前端富文本编辑器所有代码借鉴借鉴么
    0 回复
  • 参考我这个?
    虽然是thinkphp的
    https://fly.layui.com/jie/23778/
    0 回复
  • <%--
    Created by IntelliJ IDEA.
    User: 19063
    Date: 2019/8/5
    Time: 11:32
    To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
    <title>后台文章编辑</title>
    <link rel="stylesheet" href="../statics/layui/css/layui.css">
    <script src="../statics/layui/layui.js"></script>


    </head>
    <body>


    地址:<img src="../statics/2019/8/20190808145347231.jpg">


    <textarea id="LAY_demo1" style="display: none;"></textarea>

    <div class="site-demo-button" style="margin-top: 20px;">
    <button class="layui-btn site-demo-layedit" data-type="content" id="wgty">获取编辑器内容</button>
    <button class="layui-btn site-demo-layedit" data-type="text">获取编辑器纯文本内容</button>
    <button class="layui-btn site-demo-layedit" data-type="selection">获取编辑器选中内容</button>
    </div>
    <script>
    layui.use(['layedit','layer','element'], function() {
    var layedit = layui.layedit
    , $ = layui.jquery
    , layer = layui.layer
    ,element = layui.element

    /*图片接口*/
    layedit.set({
    uploadImage: {
    url: 'picture' //接口url
    ,type: 'post'//默认post
    }
    });
    //构建一个默认的编辑器layer
    var index = layedit.build('LAY_demo1');

    //编辑器外部操作
    var active = {
    content: function () {
    alert(layedit.getContent(index))
    }
    , text: function () {
    alert(layedit.getText(index)); //获取编辑器纯文本内容
    console.log(layedit.getText(index))
    }
    , selection: function () {
    alert(layedit.getSelection(index));
    console.log(layedit.getSelection(index))
    }
    };
    $('.site-demo-layedit').on('click', function () {
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
    });


    /*数据内容*/
    $("#wgty").click(function () {
    var index_tt =layedit.getContent(index);
    var obj = {
    "edirot": index_tt
    }
    console.log(obj)//获取编辑器内容
    $.ajax({
    url:"Editor",
    type:"post",
    dataType:"json",
    data:obj,
    success:function (data) {
    if (data.usernme_t==1) { //判断状态
    layer.open({
    type: 1,
    area: ['200px', '100px'],
    content: '<p align="center">发布成功</p>' //这里content是一个普通的String
    });
    }else {
    layer.open({
    type: 1,
    area: ['200px', '100px'],
    content: '<p align="center">发布失败</p>' //这里content是一个普通的String
    });
    }
    }
    })
    })
    })
    </script>
    </body>
    </html>
    0 回复
  • 你项目本身能否根据图片地址访问图片?
    0 回复
  • 可以的,但在项目 运行时,后台返回的时候就访问不到
    0 回复
  • url: 'picture'

    这个url:‘picture’能访问到吗?
    0 回复
  • 可以的,我都用着个上传了图片,后台都打出图片地址了
    {"src":"..\/statics\/2019\/8\/20190809104909966.jpg","title":"20190809104909966.jpg"}}
    0 回复
  • 后台成功上传图片,前台读不到图片
    0 回复