账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    后台管理界面用UEditor上传的图片如何在web应用里显示呢?
    23
    0

    用Node.js+Vue+UEditor搭了一个后台管理页面,UEditor的图片上传可以用了,UEditor编辑器里也可以正常地查看上传的图片

    现在问题就是我另开一个web服务,获取UEditor编辑的页面内容时无法获取到图片

    后台管理服务的相关代码

    var ueditor = require("ueditor"); //用的是https://github.com/netpi/ueditor
    app.use(express.static(path.join(__dirname, 'public')));
    app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function(req, res, next) {
      // ueditor 客户发起上传图片请求
      if(req.query.action === 'uploadimage'){
        var img_url = '/images';
        res.ue_up(img_url);
      }
      //  客户端发起图片列表请求
      else if (req.query.action === 'listimage'){
        var dir_url = '/images'; 
        res.ue_list(dir_url);
      }
      // 客户端发起其它请求
      else {
        res.setHeader('Content-Type', 'application/json');
        res.redirect('/ueditor/config.json')
    }}));

    UEditor的编辑内容:

    <p>
        <img src="/images/apple.jpg" alt="apple.jpg"/>
    </p>

    web服务的log

    GET /images/apple.jpg?noCache=jff6r41n 404 0.949 ms - 1422

    我想应该是图片上传到了后台管理服务的public目录里了,所以web服务这边没法访问到图片,那么这种情况该如何处理?上传到一个公有目录吗?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 萌哒哒的汉子 普通会员 1楼

      在Web应用中使用UEditor上传的图片,你需要确保图片已经成功上传并且保存到了服务器上。然后,你可以使用JavaScript来获取和显示这些图片。

      以下是一个基本的示例:

      1. 首先,你需要在服务器端存储图片的路径。你可以使用JavaScript的XMLHttpRequest对象来获取文件。

      javascript var xhr = new XMLHttpRequest(); xhr.open("GET", "/api/upload", true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var img = new Image(); img.src = xhr.responseText; document.getElementById("img-container").appendChild(img); } }; xhr.send();

      1. 然后,在Web应用中,你需要使用JavaScript来获取上传的图片。你可以通过document.getElementById来获取上传图片的<img>元素。

      javascript var img = document.getElementById("upload-image");

      1. 如果图片成功上传,你可以使用JavaScript来显示图片。你可以通过img.src属性来设置图片的URL。

      javascript img.src = "path/to/uploaded/image.jpg";

      注意:你需要确保服务器端已经正确处理了图片上传,并且图片路径正确。此外,你需要确保服务器端的图片URL能够被Web应用访问。

      以上就是一个基本的示例,具体的实现可能会根据你的需求和服务器环境有所不同。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部