前言
最近到了一家新公司，正好做到圖片上傳的需求，之前做過的一些圖片上傳都是前端傳到後端，然後後端再上傳到服務器，或者是用七牛雲。這次公司統一用的阿里oss，因為沒有弄過，上網查閲了一下大佬們是怎麼做的，卻發現很複雜很麻煩？於是自己寫了一下，分享給有需要的人。
代碼實現
-
wangEditor引入
- npm或者cdn引入都可以（官網有介紹：https://www.kancloud.cn/wangfupeng/wangeditor3/332599）
- 實例化編輯器
- npm或者cdn引入都可以（官網有介紹：https://www.kancloud.cn/wangfupeng/wangeditor3/332599）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor demo</title>
</head>
<body>
<div id="editor">
<p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p>
</div>
<!-- 注意， 只需要引用 JS，無需引用任何 CSS ！！！-->
<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
editor.create()
</script>
</body>
</html>-
阿里oss sdk引入（同樣支持cdn或者npm，我用的是cdn）
<script type="text/javascript" src="js/aliyun-oss-sdk.min.js"></script>
-
最後一步，在wangEditor的customUploadImg裏面寫上傳的邏輯
- new OSS裏面的參數後台都可以傳給你，記得上傳成功後用insert插入圖片。（我這裏介紹的是簡單上傳，分片以及斷點上傳文檔也寫的很清楚：https://help.aliyun.com/document_detail/64047.html?spm=a2c4g.11186623.6.1195.45885966oMzAFz）
self.editor.customConfig.customUploadImg = function(file, insert) {//這個要放在editor.create();之前，放在之後獲取不到上傳的文件
console.log(file,"file")//是個數組，所以後面要用file[0]
var client = new OSS({
region: self.token.region,
accessKeyId: self.token.accessKeyId,
accessKeySecret: self.token.accessKeySecret,
stsToken: self.token.stsToken,
bucket: self.token.bucket
})
//這是同步的方式
// async function putBlob () {
// try {
// let result = await client.put(self.token.endpoint+'/math-editor/'+file[0].name, new Blob([file[0]]));
// console.log(result);
// insert(result.url)
// } catch (e) {
// console.log(e);
// }
// }
// putBlob()
//這是異步的方式
client.put(self.token.endpoint+'/math-editor/'+file[0].name, file[0]).then(function (r1) {
console.log('put success: %j', r1);
return client.get(self.token.endpoint+'/math-editor/'+file[0].name);
}).then(function (r2) {
console.log('get success: %j', r2);
insert(r2.res.requestUrls[0])
}).catch(function (err) {
console.error('error: %j', err);
});
};
self.editor.create()
},
結束
很簡單吧，週一上午抽空寫的小文章，有什麼錯誤，大家及時指正，我隨時更改，一起進步。