wangEditor5使用腾讯对象存储实现视频上传

1.申请并配置cos

此部分详见cos官网，不再赘述；

2.引入cos的SDK

import COS from 'cos-js-sdk-v5'
//配置id和密钥
const cos = new COS({
    SecretId:'xxxx',
    SecretKey:'xxxxxxxx'
})

3.在onCreated中自定义上传视频方法

    onCreated(editor) {
      // 一定要用 Object.seal() ，否则会报错
      this.editor = Object.seal(editor); 
     
      //图片配置
      // 自定义上传方法
      const customUpload = (file, insertFn) => {
        // file 即选中的文件
        cos.putObject(
          {
            Bucket: "xxxxx", // 存储桶名称
            Region: "ap-chengdu", // 地域
            Key: `a/b/${file.name}`, // 文件名，前面可拼存储路径
            Body: file, // 要上传的文件对象
            StorageClass: "STANDARD", // 上传的模式类型 直接默认 标准模式即可
          },
          (err, data) => {
            if (data?.Location) {
              const url = "http://" + data.Location;
              insertFn(url);
            }
          }
        );
      };
      //将定义的上传方法与绑定给editor的uploadVideo配置
      editor.getMenuConfig("uploadVideo").customUpload = customUpload;
    },

作者：admin

TTF的家园-www.ttfde.top 个人博客以便写写东西，欢迎喜欢互联网的朋友一起交流!

TTF的家园 站点 QQ交谈