多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
在前一章中我们讲解了如何通过配置upload属性来配置图片上传,除了配置编辑器集成的webuploader插件来图片上传外,我们还可以自己编写来**替代webuploader上传功能** > Why? 因为在某些场景,我们会有比webuploader更好的选择,比较典型的一个例子就是在微信客户端,我们可以利用微信的jsapi接口来替换它 > 如何实现? 既然是由我们自定义上传,我们就不需要引入webuploader.min.js,初始化也无需定义upload参数,我们只需要在初始化中定义一个uploader参数回调(别和upload搞混了),当点击上传图片时均会调用此方法 > **注意:uploader参数必须是一个函数,并且必须返回一个Promise对象,来看看如何实现** 这里我们演示一下利用微信接口替代webuploader上传的例子 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>调用微信上传图片例子,无需webuploader</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <!-- !!!这里除了引入jquery和Eleditor两个文件,无需引入webuploader.min.js --> <script src="Eleditor目录/jquery.min.js"></script> <script src="Eleditor目录/Eleditor.js"></script> <style> *{margin: 0;padding: 0;} #article-body{ width: 100%; min-height: 300px; box-sizing: border-box; padding: 10px; color: #444; } </style> </head> <body> <!-- 内容编辑区域 --> <div id="article-body"></div> <script> /*实例化一个编辑器*/ new Eleditor({ el: '#article-body', /*注意:upload和uploader参数两个不能共存*/ uploader: function(){ /*必须返回一个Promise对象,成功返回url,失败返回错误信息*/ return new Promise(function(_resolve, _reject){ /*调用微信接口选取图片*/ wx.chooseImage({ count: 1, sizeType: ['compressed'], success: function (_selected) { if( _selected.localIds.length == 0 ){ return; } /*中转到【微信服务器】*/ wx.uploadImage({ localId: _selected.localIds[0], success: function (_resp) { /*取得图片serverId后传给后端保存处理并返回url*/ $.ajax({ url: '服务器接收地址', type: 'POST', data: { /*把serverId传给服务器,服务器取微信换取图片并保存返回url*/ media_id: _resp.serverId }, cache: false, success: function(_resu){ if( _resu.status == 0 ){ return _reject(_resu.msg); } /*执行resolve并传递url*/ _resolve(_resu.url);/*这里也可以传递数组*/ }, error: function(){ _reject('上传失败!'); } }); } }); } }); }); } }); </script> </body> </html> ~~~ >请注意,upload参数和uploader参数不能共存 本demo直接微信预览是没效的,因为这里只讲解如何实现,省略了如何请求微信jsapi权限和服务端如何用media_id保存等逻辑,不在本文讨论范畴