react WangEditor 编辑器阿里云OSS上传图片

wangEditor 编辑器使用阿里云OSS上传图片

刚开始写的时候，去网上翻阅了很多文章，发现根本没有我想要的，有时候还有需要自己去阅读官方的文章来解决问题。

学习上有一点很重要，我们需要的是怎么去官方阅读文档找到解决方案，而不是单纯的去网上搜索别人的代码。

第一步阅读wangEditor的文档
找到文档的这个描述，第一次找的时候，没有看到靠。

从上面的这个文档里面我们找到了一个重要的API函数，我们可以拿到两个参数，

• file 这个参数是图片信息的参数
• insertFn 插入图片的函数

editorConfig.MENU_CONF['uploadImage'] = {
    // 自定义上传
    async customUpload(file: File, insertFn: InsertFnType) {  // TS 语法
    // async customUpload(file, insertFn) {                   // JS 语法
        // file 即选中的文件
        // 自己实现上传，并得到图片 url alt href
        // 最后插入图片
        insertFn(url, alt, href)
    }
}

我们接下来看阿里云OSS文档
下图的标记是关键

我们要
npm install ali-oss

      const client = new OSS({
        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
        region: 'yourRegion',
        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // 从STS服务获取的安全令牌（SecurityToken）。
        stsToken: 'yourSecurityToken',
        // 填写Bucket名称。
        bucket: 'examplebucket'
      });

这个data对象可以自定义为file对象 ，就是我们之前 file 这个参数是图片信息的参数

       // data对象可以自定义为file对象、Blob数据或者OSS Buffer。
          const result = await client.put(
            "exampledir/exampleobject.txt",
            data
            //{headers}
          );
          console.log(result);
        } catch (e) {
          console.log(e);
        }

完整代码如下

alioss.ts 目录
const OSS = require('ali-oss');
/* OSS配置项 */
const client = new OSS({
    region: 'xxxx',
    accessKeyId: 'xxxx',
    accessKeySecret: 'xxxx',
    bucket: 'xxxx'
});

/**
 * 生成唯一文件名
 * @param file     文件对象
 * @param callback 回调
 * @param dirname  指定文件夹
 * @returns 阿里云返回参
 */
export function on_click_upload_img(file: any, callback: any, dirname = "") {
    let val = file.name;
    let suffix = val.substr(val.lastIndexOf("."));
    let storeAs = dirname + "/" + (file.customName ? file.customName.replace(',', "，") : '') + getFileName() + suffix;
    console.log(444, storeAs, file);

    client.put(storeAs, file).then(function (r1: any) {
        callback(r1.name);
    }).catch(function (err: any) {
        callback(0);
    });
}

import { on_click_upload_img } from '../Aliyun/alioss'
    // 上传视频
    editorConfig.MENU_CONF['uploadVideo'] = {
        // 自定义上传
        async customUpload(resultFiles: File, insertFn: InsertFnType) {  // TS 语法
            // async customUpload(file, insertFn) {                   // JS 语法
            // file 即选中的文件
            // 自己实现上传，并得到视频 url poster
            // 最后插入视频
            on_click_upload_img(resultFiles, (fileName: string | number) => {
                if (fileName === 0) {
                    message.error('上传失败')
                } else {
                    message.success('上传成功')
                    insertFn(`https://xxxxxx/${fileName}`)
                }
            }, '/bbb')
            // insertFn(url, poster)
        }
    }