返回

Vue3+WangEditor巧妙实现自定义上传图片、视频功能

前端

如何在 Vue3 中集成 WangEditor 并实现自定义图片和视频上传

简介

在现代网络开发中，富文本编辑器已成为不可或缺的工具。它允许用户轻松创建和编辑内容，而无需任何 HTML 或 CSS 知识。其中，WangEditor 以其强大的功能和易用性脱颖而出。本文将深入探讨如何在 Vue3 中集成 WangEditor，并逐步指导您完成自定义上传图片和视频组件的开发和集成。

1. 安装依赖

首先，在您的项目中安装 Vue3 和 WangEditor：

npm install vue3 wangeditor

2. 创建自定义上传组件

接下来，创建一个自定义上传组件，负责处理上传请求和保存文件：

// CustomUploadComponent.vue
import { Component, Prop } from "vue";
import { UploadFile } from "wangeditor";

@Component
export default class CustomUploadComponent extends Vue {
  @Prop() accept: string;

  handleUpload(files: UploadFile[]) {
    // 处理上传请求，保存文件，并返回上传成功的文件列表
    const successFiles = [];
    files.forEach((file) => {
      // 保存文件
      const formData = new FormData();
      formData.append("file", file.file);

      fetch("/api/upload", {
        method: "POST",
        body: formData,
      }).then((res) => {
        if (res.ok) {
          successFiles.push(file);
        }
      });
    });

    return successFiles;
  }
}

3. 集成自定义上传组件

将自定义上传组件集成到 WangEditor 中：

// main.js
import { createApp } from "vue";
import { WangEditor } from "wangeditor";
import CustomUploadComponent from "./CustomUploadComponent.vue";

const app = createApp({
  components: {
    CustomUploadComponent,
  },
});

const editor = new WangEditor(document.querySelector("#editor"));
editor.config.uploadImgUrl = "/api/upload";
editor.config.uploadImgFileName = "file";
editor.config.uploadImgHeaders = {
  "Content-Type": "multipart/form-data",
};
editor.config.uploadImgTimeout = 60000;
editor.config.uploadImgHooks = {
  before: (xhr, editor, files) => {
    // 在上传之前执行
  },
  success: (xhr, editor, result) => {
    // 上传成功后执行
  },
  fail: (xhr, editor, result) => {
    // 上传失败后执行
  },
  error: (xhr, editor, result) => {
    // 上传出错后执行
  },
};

editor.config.customUploadComponent = CustomUploadComponent;

editor.create();

4. 运行项目

运行项目并测试自定义上传组件：

npm run dev

5. 总结

通过本教程，您已成功在 Vue3 中集成了 WangEditor，并实现了自定义图片和视频上传功能。祝您在开发中一帆风顺！

常见问题解答

1. 如何在服务器端处理上传的文件？

服务器端代码取决于您使用的技术栈。在示例中，我们使用了一个简单的 HTTP 服务器，它接收文件并将其保存在服务器上。

2. 如何限制上传文件的大小和类型？

您可以在 WangEditor 配置中设置 uploadImgMaxSize 和 uploadImgAccept 选项。

3. 如何自定义上传组件的外观？

您可以通过 CSS 样式覆盖组件的样式。

4. 如何处理上传错误？

您可以在 uploadImgHooks 的 fail 和 error 选项中处理上传错误。

5. 如何使用 CDN 来加载 WangEditor？

您可以将以下代码添加到您的 HTML 头部：

<script src="https://cdn.wangeditor.com/js/wangEditor.min.js"></script>