在前一章中我們講解了如何通過配置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保存等邏輯,不在本文討論范疇