通知短信+运营短信,5秒速达,支持群发助手一键发送🚀高效触达和通知客户 广告
不知道大家知不知道有一个**小黄鸭调试**,即在桌子上放一只小鸭子,如果遇到调试不好的bug了,就讲程序一行一行的解释给这个鸭子听(鸭子吗,当然得给它讲的足够仔细,它才能听懂啊),然后解释的过程中,你或许就能发现自己的程序问题。 ![](https://box.kancloud.cn/2016-03-24_56f3c4af78c00.png) 因此,当你上传图片出错时,先去买个小鸭子,然后对着它讲下面的故事。 ---- ### 故事正式开始了 故事的主角可以是两个人(前端 & 后端),也可以是一个人(全栈)。 --- **序幕** 1. 如果你是一位初学者,对图片上传这回事儿一知半解,参见:http://www.kancloud.cn/wangfupeng/wangeditor2/129924 2. 你得确定你写的程序没有报任何的程序异常,如果有异常,请自己去查,本故事一概不管。 --- **第一集:** 根据[配置文档](http://www.kancloud.cn/wangfupeng/wangeditor2/113992)说明,要使用上传图片,肯定要为你的编辑器配置上传地址: ```js var editor = new wangEditor('div1'); // 配置上传图片的地址 editor.config.uploadImgUrl = '/upload'; editor.create(); ``` 你只要配置了一个上传地址,无论这个地址是否正确,此时都会显示选择图片的按钮了。如果此时没有显示下图,或者点击按钮没法选择文档,请给作者提交issue(一定要说明是什么浏览器)。 ![](https://box.kancloud.cn/2016-03-24_56f3c4ba34914.png) --- **第二集** 接下来你要确定这个地址是正确的,而不是一个无效的地址。 事先打开chrome的开发者工具,windows系统`f12`键即可打开,定位到这里: ![](https://box.kancloud.cn/2016-03-24_56f3c4ba460cb.png) 运行编辑器页面,选择图片、上传,然后查看这里是的记录。如果如下图一样显示`404`,那就说明你这个地址是个空地址、无效地址。如果是这样的话,你就别继续往下看了,找后端开发者去要正确地址吧,要到了再重新进行这一步测试。 ![](https://box.kancloud.cn/2016-03-24_56f3c4ba5bb72.png) --- **第三集** 上文已经确定了上传图片的地址是有效的,但是此时可能还有错误。没关系,我们继续往下走。接下来你需要确定一下你的后台程序是否取到了前台传过去的图片。 先在后台程序中设置调试断点或者增加log记录,然后在前台选择图片、上传。然后根据调试断点和log记录来查看`request`中是否有信息如下的`file`(不同后台语言的查看语法不同,自己来写) ![](https://box.kancloud.cn/2016-03-24_56f3c4ba7389b.png) 以上截图,可以在chrome浏览器的开发者工具中看到。 *这里插一句,如果不知道后台如何查看`request`中的`file`信息,也不必再往下看了,先去搞明白这个知识* 如果能得到这个file,那就把这个file存储到服务器的某一个文件夹中。如果得不到,就不要再继续往下看了,先看看上面截图中的`request`中的信息,如果你的`request`信息不像截图中一样,请反馈给作者。 ---- **第四集** 走到这里,就说明你得到了前台传来的图片,并且已经成功的存储到服务器的某一个文件夹。 接下来,我需要你给出一个`url`,让我在浏览器中输入这个`url`,然后回车,能得到刚才存储的图片,格式如`http://localhost:8011/uploadfiles/5168898981064558.jpeg`。如果你能成功给出这个图片的`url`,那就继续往下看,否则就不要继续了,想办法获取这个`url`。 ![](https://box.kancloud.cn/2016-03-24_56f3c4ba9a132.png) --- **第五集** 上文中得到了图片的`url`,然后在你的后端程序最后`response`出这个url即可了。`response`出来的信息应该能在这里看到 ![](https://box.kancloud.cn/2016-03-24_56f3c4bab75f5.png) *再插一句,如果不知道如何`response`出一个字符串,那就不要继续了,先去搞明白这个知识* 如果能正确`response`出图片地址,那么上传图片这个功能,应该就成功了。 --- **大结局** 最后解释一下上传图片时输出的`console.log`信息,有助于大家排查错误。 ![](https://box.kancloud.cn/2016-03-24_56f3c4bacc5da.png) 上图中,第一块是上传之前的日志信息,包括使用什么方式、选择了什么文件、什么时候开始上传。这块的问题应该不会太多,都是编辑器的程序控制的,用户无需修改。 第二块,后面的`url`,是后台`response`出来的信息,上一集讲过了。因为要求`respone`出来的是一个图片地址,因此要将这个`url`插入到编辑区域,显示出图片来。 ---- 以上就是上传图片的整个过程,大家出错时,哪里有问题请对号入座,尽快解决!