上传视频

效果

代码

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
  <button @click="getcontent">提交</button>
</template>

<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

// 编辑器实例,必须用shallowRef包裹

const editorRef = shallowRef();

// 内容HTML

const valueHtml = ref("<p>hello</p>");

// 编辑器模式

const mode = ref("default"); // simple或者default;

// 模拟ajax异步获取数据内容

onMounted(() => {
  setTimeout(() => {
    valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
  }, 1500);
});

// 工具栏配置

const toolbarConfig = {};

// 编辑器配置

const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: { uploadVideo: {} },
};

// 上传视频配置

editorConfig.MENU_CONF["uploadVideo"] = {
  maxNumberOfFiles: 5,

  allowedFileTypes: ["video/mp4", "video/webm", "video/ogg"],

  // 是否跨域传输

  withCredentials: false,

  // 单个文件的最大体积限制，默认为 10M

  maxFileSize: 100 * 1024 * 1024, // 5M

  // 视频上传地址

  server: "https://newapidev.dianyuan.com/admin/factory/general/uploadFile",

  // 超时时间
  timeout: 30 * 1000, // 5s

  // form-data fieldName ，默认值 'wangeditor-uploaded-image'

  fieldName: `file`,

  // 额外的字段

  meta: {
    module: "community",
  },

  // 头部参数

  headers: {
    "access-token":
      "1wuDp%2FyTmMf%2BWsYw4ymTit%2BxsmrOMzLqXYepM261jXgfVa9%2BCVhkjg1Mm%2B6wDmua",
  },

  // 上传之前触发
  onBeforeUpload(file: File) {
    // TS 语法
    // onBeforeUpload(file) {      // JS 语法
    // file 选中的文件，格式如 { key: file }
    return file;

    // 可以 return
    // 1. return file 或者 new 一个 file ，接下来将上传
    // 2. return false ，不上传这个 file
  },

  // 上传进度的回调函数
  onProgress(progress: number) {
    // TS 语法
    // onProgress(progress) {       // JS 语法
    // progress 是 0-100 的数字
    console.log("progress", progress);
  },

  // 单个文件上传成功之后
  onSuccess(file: File, res: any) {
    // TS 语法
    // onSuccess(file, res) {          // JS 语法
    console.log(`${file.name} 上传成功`, res);
  },

  // 单个文件上传失败
  onFailed(file: File, res: any) {
    // TS 语法
    // onFailed(file, res) {          // JS 语法
    console.log(`${file.name} 上传失败`, res);
  },

  // 上传错误，或者触发 timeout 超时
  onError(file: File, err: any, res: any) {
    // TS 语法
    // onError(file, err, res) {               // JS 语法
    console.log(`${file.name} 上传出错`, err, res);
  },

  // 自定义上传视频

  customInsert(res: any, insertFn: any) {
    // TS 语法
    // customInsert(res, insertFn) {
    // res 即服务端的返回结果
    console.log(res);
    const imgInfo = res.data || {};
    const { path, path_real } = imgInfo;
    if (!path_real) throw new Error(`Video url is empty`);
    insertFn(path_real);
    // 从 res 中找到 url poster ，然后插入视频
    // insertFn(url, poster);
  },
};
// 组件销毁的时候,也即时 销毁编辑器

onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

// 编辑器示例

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录editor实例
};

// 获取到编辑器内容

const getcontent = () => {
  window.alert(valueHtml.value);
};
</script>

<style scoped lang="scss"></style>

视频属性

// 编辑器配置

const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: { uploadVideo: {} },
};

// 上传视频配置

editorConfig.MENU_CONF["uploadVideo"] = {
  maxNumberOfFiles: 5,

  allowedFileTypes: ["video/mp4", "video/webm", "video/ogg"],

  // 是否跨域传输

  withCredentials: false,

  // 单个文件的最大体积限制，默认为 10M

  maxFileSize: 100 * 1024 * 1024, // 5M

  // 视频上传地址

  server: "https://newapidev.dianyuan.com/admin/factory/general/uploadFile",

  // 超时时间
  timeout: 30 * 1000, // 5s

  // form-data fieldName ，默认值 'wangeditor-uploaded-image'

  fieldName: `file`,

  // 额外的字段

  meta: {
    module: "community",
  },

  // 头部参数

  headers: {
    "access-token":
      "1wuDp%2FyTmMf%2BWsYw4ymTit%2BxsmrOMzLqXYepM261jXgfVa9%2BCVhkjg1Mm%2B6wDmua",
  },

  // 上传之前触发
  onBeforeUpload(file: File) {
    // TS 语法
    // onBeforeUpload(file) {      // JS 语法
    // file 选中的文件，格式如 { key: file }
    return file;

    // 可以 return
    // 1. return file 或者 new 一个 file ，接下来将上传
    // 2. return false ，不上传这个 file
  },

  // 上传进度的回调函数
  onProgress(progress: number) {
    // TS 语法
    // onProgress(progress) {       // JS 语法
    // progress 是 0-100 的数字
    console.log("progress", progress);
  },

  // 单个文件上传成功之后
  onSuccess(file: File, res: any) {
    // TS 语法
    // onSuccess(file, res) {          // JS 语法
    console.log(`${file.name} 上传成功`, res);
  },

  // 单个文件上传失败
  onFailed(file: File, res: any) {
    // TS 语法
    // onFailed(file, res) {          // JS 语法
    console.log(`${file.name} 上传失败`, res);
  },

  // 上传错误，或者触发 timeout 超时
  onError(file: File, err: any, res: any) {
    // TS 语法
    // onError(file, err, res) {               // JS 语法
    console.log(`${file.name} 上传出错`, err, res);
  },

  // 自定义上传视频

  customInsert(res: any, insertFn: any) {
    // TS 语法
    // customInsert(res, insertFn) {
    // res 即服务端的返回结果
    console.log(res);
    const imgInfo = res.data || {};
    const { path, path_real } = imgInfo;
    if (!path_real) throw new Error(`Video url is empty`);
    insertFn(path_real);
    // 从 res 中找到 url poster ，然后插入视频
    // insertFn(url, poster);
  },
};