wangEditor3.X直传文件(图片)到阿里oss,支持ctrl+v以及拖拽上传

面对疾风吧

前言

最近到了一家新公司,正好做到图片上传的需求,之前做过的一些图片上传都是前端传到后端,然后后端再上传到服务器,或者是用七牛云。这次公司统一用的阿里oss,因为没有弄过,上网查阅了一下大佬们是怎么做的,却发现很复杂很麻烦?于是自己写了一下,分享给有需要的人。

代码实现

<!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里面写上传的逻辑

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()
      },

结束

很简单吧,周一上午抽空写的小文章,有什么错误,大家及时指正,我随时更改,一起进步。
阅读 1.4k

面对疾风把~~

188 声望
7 粉丝
0 条评论

面对疾风把~~

188 声望
7 粉丝
宣传栏