wangEditor2图片上传配置问题

Question

使用wangEditor2这个富文本组件。。。图片上传配置按文档的走，前台页面都显示不出图片。页面上报服务器路径找不到，请问这是怎么解决，望解答？

文档url:https://www.kancloud.cn/wangf...

Action层代码

@SuppressWarnings("serial")
public class uploadAction extends ActionSupport {
    /**
     * 这里集合形式输入到流，防止上传重复文件,减少服务器压力
     */    
    // 上传文件存放路径
    private final static String uploadAddres = "/uploadIMG";

    // 上传文件集合泛型为file对象
    private List<File> file;
    // 上传文件名集合
    private List<String> fileFileName;
    
    private int id;
    private String textarea;
    private List<message> messageALL;
    private message_sql_Implem msiImplem;
    message message = new message();
    省略setget    
    // 上传图片方法
    public String execute() throws Exception {
        // 打印文件名称
        System.out.println("图片名称:" + this.getFileFileName());
        for (int i = 0; i < file.size(); i++) {
            // 循环上传每个文件
            msiImplem.uploadFile(i);
        }
        System.out.println("上传成功");
        return "uploadSuccess";
    }
}

Implements层方法

public class message_sql_Implem extends sql_Command<message> {
    SessionFactory sessionFactory;
    
    /**
     * 这里集合形式输入到流，防止上传重复文件,减少服务器压力
     */
    private String img_title;// 图片标题
    private int img_state;// 状态
    // 上传文件存放路径
    private final static String uploadAddres = "/uploadIMG";

    // 上传文件集合泛型为file对象
    private List<File> file;
    // 上传文件名集合
    private List<String> fileFileName;
    // 上传文件内容类型集合
    private List<String> fileContentType;

    private int id;
    private String textarea;
    private List<message> messageALL;
    private message_sql_Implem msiImplem;
    message message = new message();

    省略setget

    
    // 调用执行上传功能
        @SuppressWarnings("deprecation")
        //@RequestMapping(value="/uploadFile");    
        public void uploadFile(int i) throws FileNotFoundException, IOException {
            try {
                InputStream in = new FileInputStream(file.get(i));
                // ServletActionContext对象响应获取实际文件地址,getRealPath已经废弃不推荐用了
                String dir = ServletActionContext.getRequest().getRealPath(
                        uploadAddres);
                System.out.println("服务器路径：" + dir);
                // 获取文件名称
                String fileName = this.getFileFileName().get(i);
                // 路径和文件名丢进file对象里
                File uploadFile = new File(dir, fileName);
                // 输出流
                OutputStream out = new FileOutputStream(uploadFile);
                // 设置文件大小1MB
                byte[] buffer = new byte[1024 * 1024];
                int length;
                // 用循环从流中读取文件的大小
                while ((length = in.read(buffer)) > 0) {
                    // 写入数据
                    out.write(buffer, 0, length);
                }        
                String imgURL = dir + "/" + fileName;
                // 将全路径截取为相对路径
                String strURL = imgURL.substring(32);
                message.setMessagecontent(textarea+strURL);
                int num=msiImplem.addMessage(message);            
                System.out.println("是否上传了信息：" + num);
                // 关闭输入流输出流，释放内存
                in.close();
                out.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
}

在文档出错解决方案里说的。。而我这个是本机项目部署在Tomcat上

Answer 1

没有/upload这个文件夹吧

Answer 2

http://localhost:8090/upload，服务器找不到该地址，就报404了。

//上传图片提交的地址，不是服务器图片存放地址。你的注释有问题呀。
editor.config.uploadImgUrl = "/upload";

看看请求的地址是否存在，看看是不是你的地址没有加应用上下文。

可以把你的后台代码贴一下吗？

你用的struts2是吧，struts2使用拦截器处理上传的，一般接收多个文件和文件名都是使用数组。我不直到是不是这个原因造成的。

代码修改如下试试。

public class uploadAction extends ActionSupport {
    /**
     * 这里集合形式输入到流，防止上传重复文件,减少服务器压力
     */    
    // 上传文件存放路径
    private final static String uploadAddres = "/uploadIMG";

    // 使用数组接收
    private File[] myFileName;//名字editor.config.uploadImgFileName值一样。
    // 使用数组接收
    private String[] myFileNameFileName;
    
    }

Answer 3

看你的文档是 wangEditor2？
我之前也是上传之后不能回显，但是图片已经到了服务器，返回的链接输到地址栏访问也是OK的
事先说一下 我是按照他的格式返回JSON的，还是不行

我用的事wangEditor3, 在3的文档中，‘上传图片到服务器’一栏中 有这样一段:

// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
    // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
    customInsert: function (insertImg, result, editor) {
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        var url = result.url
        insertImg(url)

        // result 必须是一个 JSON 格式字符串！！！否则报错
    }
    }

你可以看下文档 试一下这个函数 可以在源码重打断点
才疏学浅 如果有啥错误 欢迎大佬指正 谢谢

Answer 4

图片上传成功，结果提示插入图片失败，有没有遇到过？按照文档返回的是一个json 字符串