vue3 使用wangEditor富文本批量上传图片

为了在Vue3中使用wangEditor富文本批量上传图片，你需要按照以下步骤进行操作：

1.首先，你需要安装wangEditor。你可以通过npm安装wangEditor，命令如下：

npm install wangeditor --save

2.在你的Vue组件中引入wangEditor，并在mounted钩子函数中初始化wangEditor。你需要在初始化时设置上传图片的配置，包括上传图片的路径和上传图片的处理函数。以下是一个示例：

<template>
  <div ref="editorElem" />
</template>

<script>
import wangEditor from 'wangeditor'

export default {
  mounted() {
    const editor = new wangEditor(this.$refs.editorElem)

    // 配置上传图片的路径和处理函数
    editor.customConfig.uploadImgServer = '/upload'
    editor.customConfig.uploadImgHooks = {
      before: function(xhr, editor, files) {
        // 在这里可以对上传的图片进行处理
      },
      success: function(xhr, editor, result) {
        // 图片上传成功后的处理函数
      },      fail: function(xhr, editor, result) {
        // 图片上传失败后的处理函数
      },
      error: function(xhr, editor) {
        // 图片上传出错的处理函数
      },
      timeout: function(xhr, editor) {
        // 图片上传超时的处理函数
      },
      customInsert: function(insertImg, result, editor) {
        // 在这里可以对插入的图片进行处理
        insertImg(result.data)
      }
    }

    editor.create()
  }
}
</script>

在上面的代码中，你需要将`/upload`替换为你的图片上传路径。在`uploadImgHooks`中，你可以设置上传图片的处理函数，包括上传前的处理函数、上传成功后的处理函数、上传失败后的处理函数、上传出错的处理函数、上传超时的处理函数和插入图片后的处理函数。在`customInsert`函数中，你可以对插入的图片进行处理。

3.在你的服务器端设置图片上传的处理函数。在上传图片的处理函数中，你需要将上传的图片保存到服务器上，并返回一个JSON格式的数据，包括图片的URL和图片的宽度和高度。以下是一个示例：

import os
from flask import Flask, request, jsonify
from werkzeug.utils import secure_filename

app = Flask(__name__)

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = secure_filename(file.filename)
    file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
    url = 'http://example.com/uploads/' + filename
    return jsonify({
        'errno': 0,
        'data': [url],
    })

在上面的代码中，你需要将`http://example.com/uploads/`替换为你的图片上传路径。