wangEditor后台上传成功但是,前端提示上传图片失败

遇到errno=undefined错误

在上传图片成功,但是却会触发fail并显示errno=undefined的话说明后台放回的字段中没有errno需要和后台沟通并加上此字段,还有若data有问题则需要与后台沟通,data应该是一个数组,存储着图片的值的路径

注意    不是 error,是  errno

此处贴上我自己的wangEditor处理后台逻辑

@PostMapping("/editor/upload")
    public Dict editorUpload(MultipartFile file) throws IOException {
        String originalFilename = file.getOriginalFilename(); //文件的原始名称
        String projectPath = System.getProperty("user.dir"); 
        //System.out.println("projectPath"+projectPath);// in linux   /home/server/mooc/java
        String filesPath = projectPath + File.separator + "files"; //文件存储的目录 D:\..\Mooc\files
        String fileRealPath = filesPath + File.separator + originalFilename; //D:\..\files\abc.png
        File saveFile = new File(fileRealPath);
        if(!saveFile.getParentFile().exists()){
            saveFile.getParentFile().mkdirs(); //如果当前文件的父级目录不存在,就创建
        }
        if(saveFile.exists()){
            fileRealPath = filesPath + File.separator + System.currentTimeMillis() + "_" + originalFilename;
            saveFile = new File(fileRealPath); //D:\..\files\12313132131_abc.png
        }
        file.transferTo(saveFile);  //存储文件到本地的磁盘里面去
        String url = "http://" + ip + ":" +port + "/file/download/" + originalFilename;
        //我们要返回一个json数据,可以通过Hutool提供的dict,dict实际上是一个map
        Dict dict = Dict.create().set("errno", 0).set("data", CollUtil.newArrayList(Dict.create().set("url",url)));
        return dict;  //返回文件的链接,这个链接就是文件的下载地址
    }

### 富文本编辑器中 `success(url)` 的使用方法 `success(url)` 是富文本编辑器(如 wangeditor 或其他类似工具)在处理图片或其他资源上传时常用的回调函数之一。它通常用于通知编辑器上传成功返回资源的 URL 地址。 以下是关于 `success(url)` 的具体说明及其使用的示例: #### 1. 基本概念 当用户通过富文本编辑器上传文件(通常是图片),编辑器会调用一个自定义接口完成实际的上传逻辑。一旦服务器端成功接收并存储该文件,则需要向客户端反馈结果,此时可以调用 `success(url)` 将新生成的文件地址递给编辑器[^3]。 #### 2. 使用场景 假设正在开发基于 wangeditor 的项目,在配置好插件之后还需要设置图片上传功能。如果采用的是异步请求方式提交数据到后台服务端程序里去保存这些多媒体资料的话,那么就需要明确告知前端应用哪些参数应该被填充进去作为响应的一部分内容以便后续渲染展示出来[^4]。 #### 3. 配置与实现 下面是一个完整的例子展示了如何集成此机制于 wangeditor: ```javascript var E = window.wangEditor; var editor = new E('#editor'); // 自定义菜单配置 (可选) editor.customConfig.menus = [ 'head', // 标题 'bold', // 粗体 'italic', // 斜体 'underline', // 下划线 'image' // 插入图片 ]; // 图片上传配置 editor.customConfig.uploadImgServer = '/upload'; // 后端接收路径 editor.customConfig.uploadFileName = 'file'; // 文件字段名,默认为 file // 成功后的回调函数 editor.customConfig.uploadImgHooks = { customInsert: function(insertImgFn, result) { let url = result.data.url; // 解析返回的数据结构获取url insertImgFn(url); // 调用 success 方法插入图片链接至编辑区 } }; editor.create(); ``` 上述代码片段设置了图片上传的相关属性,并指定了当接收到成功的 HTTP 请求回复后该如何解析 JSON 数据提取出最终可用的媒体资源位置字符串形式表示法送给内部组件进一步加工处理显示效果^。 #### 注意事项 - **确保 CORS 支持**: 如果前后端分离部署,请确认 API 接口已开启跨域资源共享策略(CORS),否则可能导致无法正常通信。 - **错误处理**: 对于失败情况也应有相应措施提示使用者重新尝试或者记录日志方便排查问题所在之处. --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值