wangEditor3.X直傳文件（圖片）到阿里oss，支持ctrl+v以及拖拽上傳

時間 2019-11-16

標籤 wangeditor3.x wangeditor 文件圖片阿里 oss 支持 ctrl+v ctrl 以及上傳欄目阿里巴巴简体版

原文原文鏈接

前言

最近到了一家新公司，正好作到圖片上傳的需求，以前作過的一些圖片上傳都是前端傳到後端，而後後端再上傳到服務器，或者是用七牛雲。此次公司統一用的阿里oss，由於沒有弄過，上網查閱了一下大佬們是怎麼作的，卻發現很複雜很麻煩？因而本身寫了一下，分享給有須要的人。javascript

代碼實現

wangEditor引入html
- 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裏面寫上傳的邏輯java
- 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()
      },

結束

很簡單吧，週一上午抽空寫的小文章，有什麼錯誤，你們及時指正，我隨時更改，一塊兒進步。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。