在前一章中我们讲解了如何通过配置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保存等逻辑,不在本文讨论范畴