概述

VueQuill富文本编辑器添加图片时，会将图片转换为base64格式

如果直接将编辑器的内容传到后端并保存到MySQL数据库时（我习惯使用text类型），很容易就超出text类型的长度，即使还有比text类型长度更长的类型，但是还是不推荐直接将base64格式的图片保存到MySQL中

所以有必要实现VueQuill富文本编辑器添加图片时，先将图片上传到服务器中，然后后端返回图片的链接给编辑器引用，编辑器要上传到图片到后端需要安装插件quill-image-uploader

实现过程

安装插件

1
npm install quill-image-uploader --save

引入

1
import ImageUploader from 'quill-image-uploader';

安装插件到编辑器

首先定义模块，只需要修改请求后端的url，下面代码的url经过getServerUrl的封装最终是localhost:8080/goods/vueQuillUploadImage，getServerUrl的代码查看博客：Vue 项目实现统一管理请求的后端 IP 地址和端口 | LeDao’s Blog (zoutl.cn)，也可以直接写出url不用封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const modules = {
  name: 'imageUploader',
  module: ImageUploader,
  options: {
    upload: file => {
      return new Promise((resolve, reject) => {
        const formData = new FormData();
        formData.append("image", file);
        let url = getServerUrl('/goods/vueQuillUploadImage');
        axios.post(url, formData)
            .then(res => {
              console.log(res)
              resolve(res.data.url);
            })
            .catch(err => {
              reject("Upload failed");
              console.error("Error:", err)
            })
      });
    }
  }
}

使用编辑器的代码如下，关键代码是:modules="modules"

1
2
3
4
5
6
7
8
9
10
<QuillEditor
    v-model:content="content"
    placeholder="这里输入商品详情..."
    theme="snow"
    ref="editor"
    toolbar="full"
    contentType="html"
    :modules="modules"
    style="height: 300px;"
/>

Java后端代码

首先引入依赖，用于文件的操作

1
2
3
4
5
6
<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.11.0</version>
</dependency>

业务代码如下，当前Controller的名称上面的注解是@RestController和@RequestMapping("/goods")，所以前端请求的路径是/goods/vueQuillUploadImage，和上面的url对应

DateUtil.getCurrentDateStr2()和System.currentTimeMillis()是根据时间生成字符串，生成的图片名称示例为202212172148271671284907136.jpg，只是用来命名而已，代码不贴了，自己去改掉

goodsDetailsImageFilePath是定义在application.yml配置文件的路径，配置为goodsDetailsImageFilePath: E://data/mall/images/goods/details/

关于返回的url，要加上http://，不然VueQuill富文本编辑器会出错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 * VueQuill富文本编辑器上传图片
 *
 * @param request
 * @return
 * @throws Exception
 */
@PostMapping("/vueQuillUploadImage")
public Map<String, Object> vueQuillUploadImage(HttpServletRequest request) throws Exception {
    //获取到文件
    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
    MultipartFile multipartFile = multipartRequest.getFile("image");
    //给图片定义一个名称
    String newFileName = DateUtil.getCurrentDateStr2() + System.currentTimeMillis() + ".jpg";
    assert multipartFile != null;
    //实现将图片保存到指定位置
    FileUtils.copyInputStreamToFile(multipartFile.getInputStream(), new File(goodsDetailsImageFilePath + "/" + newFileName));
    //返回指定的格式给前端使用
    Map<String, Object> map = new HashMap<>(16);
    map.put("url", "http://localhost:8080/image/goods/details/" + newFileName);
    return map;
}

修改可上传文件的大小

Spring Boot默认可上传的最大文件大小是1MB，可以去application.yml配置文件修改，配置如下：

1
2
3
4
5
spring:
  servlet:
    multipart:
      enabled: true
      max-file-size: 10MB

PS.

官网地址为：Modules | VueQuill (vueup.github.io)，只有前端代码，后端代码需要自己实现，前端根据后端返回的数据拿到url就行了，不规定格式

参考代码GitHub仓库链接：a6678696/vue-quill-demo