关于Vue3使用wangEditor5富文本编辑器上传图片失败的解决办法

一、问题描述

在Vue3使用富文本编辑器上传图片时，图片没有回显，同时控制台报“413”错误：

二、问题分析

根据控制台的报错“413（Payload Too Large）”（翻译过来是：有效负载过大），意识到是上传的图片大小超过了浏览器的限制。因此，需要在客户端和服务器端都进行相应的配置。

三、解决办法

1.客户端配置

首先考虑到客户端在富文本编辑器初始化代码中配置参数限制图片的大小，我的初始化代码如下：

const baseUrl = 'http://localhost:9090'
const editorRef = shallowRef()
const mode = 'default'
const editorConfig = { MENU_CONF: {} }
// 图片上传相关配置
editorConfig.MENU_CONF['uploadImage'] = {
  server: baseUrl + '/files/wang/upload',  // 服务端图片上传接口
  fieldName: 'file'  // 服务端图片上传接口参数
}
// 组件销毁时及时销毁编辑器避免内存泄漏
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
const handleCreated = (editor) => {
  editorRef.value = editor
}

我们可以通过配置editorConfig.MENU_CONF['uplodImage']的uploadImgMaxSize参数来设置允许上传的最大文件大小（单位为字节），如下：

editorConfig.MENU_CONF['uploadImage'] = {
  server: baseUrl + '/files/wang/upload',  // 服务端图片上传接口
  fieldName: 'file',  // 服务端图片上传接口参数
  uploadImgMaxSize: 2 * 1024 * 1024,  // 限制上传图片最大为2MB
}

刷新前端页面尝试上传图片发现仍然会产生上述报错，因此考虑在服务器端进行配置。

2.服务器端配置

针对后端使用的SpringBoot3框架，可以在application.properties或application.yml中配置请求体大小限制：

# application.properties
spring.servlet.multipart.max-file-size=5MB
spring.servlet.multipart.max-request-size=5MB

# application.yml
spring:
  servlet:
    multipart:
      max-file-size: 5MB
      max-request-size: 5MB

重启SpringBoot后，再尝试从前端上传图片，可以发现富文本编辑器中可以正常回显图片了，同时，控制台也不会报错，问题解决！

四、补充

wangEditor5对于上传的图片有很多可以设置的参数，详见：上传图片。其中，对于所上传的图片大小有一个默认值：

因此，在客户端配置的2M最大上传大小是没有太大必要的。