vue3 wangEditor富文本自定义上传本地图片

最新推荐文章于 2024-01-14 08:16:40 发布

无妄的罪

最新推荐文章于 2024-01-14 08:16:40 发布

阅读量2.3k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_73481765/article/details/131985769

版权

本文介绍了如何在Vue3应用中结合WangEditor实现自定义上传本地图片。通过监听文件选择器变化，获取图片文件，然后配置WangEditor的上传接口和参数，使用XMLHttpRequest进行图片上传。示例代码展示了单张图片上传的实现，若要支持多张图片，需在上传方法中处理文件数组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue3和WangEditor都提供了上传本地图片的功能，可以结合使用实现自定义上传本地图片。

首先，在Vue3中，我们可以使用 onFileChange 事件来监听文件选择器的变化，获取到选中的本地图片文件。然后，将这个文件传递给WangEditor，让WangEditor进行上传。

在WangEditor中，我们可以通过配置 uploadImgServer 和 uploadImgParams 来实现上传本地图片。其中，uploadImgServer 是图片上传接口地址，uploadImgParams 是图片上传时需要传递的参数。我们可以将Vue3中获取到的本地图片文件传递给 uploadImgParams 中，再提交到服务器进行上传。

以下是一个简单的实现示例：

<template>
  <div class="editor-wrapper">
    <div ref="editorElem" class="editor"></div>
    <input type="file" ref="fileInput" @change="onFileChange">
  </div>
</template>

<script>
import WangEditor from 'wangeditor'

export default {
  mounted() {
    // 初始化WangEditor
    const editor = new WangEditor