富文本复制粘贴图片直接上传到后台

富文本上传图片通常都是通过富文本组件里面的上传图片按钮进行上传，但是这里上传的话还得打开文件夹然后进行上传，用户上传图片也得先将图片保存到本地之后再上传，步骤比较繁琐。

富文本自带粘贴图片的功能，但是粘贴的是图片base64编码，如果直接保存到数据库的话内容比较大，当然也可以用 CLOB 来存储，不过这样子占用也比较大。

这里我通过将传到后台的base64编码转成文件，然后将文件上传至服务器，最后将上传返回的url替换base64编码，就上传完成了

下面是一个弹框，填写相对应信息

    <el-dialog title="添加问题" :visible.sync="openAdd" width="50%" append-to-body>
      <el-form ref="addform" :model="form" :rules="rules" label-width="100px" >
        <el-form-item label="所属节点" prop="bynode" v-if="form.uuid == null">
          {{ nowNode.label }}
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input
            placeholder="输入标题（长度限制20）"
            maxlength="20"
            size="mini"
            show-word-limit
            v-model="form.title">
          </el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <Editor v-model="form.content"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: 20px">
        <el-button type="primary" @click="submitAdd">确 定</el-button>
        <el-button @click="openAdd = false,form = {}">取 消</el-button>
      </div>
    </el-dialog>

富文本组件是封装好的，内容项直接调用组件即可，点击确定后上传，先看看上传的报文

红色框住即是富文本上传的内容，看到上传的是base64编码的格式，再看看后台接收的内容

是一大串的base64编码，使用方法处理内容中的值

//递归处理内容中的图片
    public String disPhoto(String content) throws IOException {
        if (content.indexOf("data:image",1) <= 0){
            return content;
        }
        int i = content.indexOf("data:image", 1);
        int i1 = content.indexOf("\">", i);
        String substring = content.substring(i, i1);
        System.out.println("base64:");
        System.out.println(substring);

        final String[] base64Array = substring.split(",");
        String dataUir, data;

        if (base64Array.length > 1) {
            dataUir = base64Array[0];
            data = base64Array[1];
        } else {
            //根据你base64代表的具体文件构建
            dataUir = "data:image/jpg;base64";
            data = base64Array[0];
        }

        MultipartFile multipartFile = new Base64ToMultipartFile(data, dataUir);
        // 上传文件路径
        String filePath = RuoYiConfig.getUploadPath();

        // 上传并返回新文件名称
        String fileName = FileUploadUtils.upload(filePath, multipartFile);
        String url = serverConfig.getUrl() + fileName;
        String replace = content.replace(substring, url);

        //如果还存在当前字符则继续处理
        if (replace.indexOf("data:image",1) > 0){
            replace = disPhoto(replace);
        }
      return replace;
    }

先查询是否有“data:image”这个字符，有的话一并查询当前字符的最后一个 "\">" 一头一尾相当于一个图片，先处理此段的base64图片，截取出来转为文件，base64转文件的方法如下

import org.springframework.web.multipart.MultipartFile;

import java.io.*;
import java.nio.charset.StandardCharsets;
import java.util.Base64;

/**
 * Created by lc
 * <p>
 * author     : lc
 * date       : 20230531
 * description:
 */
public class Base64ToMultipartFile implements MultipartFile {
    private final byte[] fileContent;

    private final String extension;
    private final String contentType;


    /**
     * @param base64
     * @param dataUri     格式类似于: data:image/png;base64
     */
    public Base64ToMultipartFile(String base64, String dataUri) {
        this.fileContent = Base64.getDecoder().decode(base64.getBytes(StandardCharsets.UTF_8));
        this.extension = dataUri.split(";")[0].split("/")[1];
        this.contentType = dataUri.split(";")[0].split(":")[1];
    }

    public Base64ToMultipartFile(String base64, String extension, String contentType) {
        this.fileContent = Base64.getDecoder().decode(base64.getBytes(StandardCharsets.UTF_8));
        this.extension = extension;
        this.contentType = contentType;
    }

    @Override
    public String getName() {
        return "param_" + System.currentTimeMillis();
    }

    @Override
    public String getOriginalFilename() {
        return "file_" + System.currentTimeMillis() + "." + extension;
    }

    @Override
    public String getContentType() {
        return contentType;
    }

    @Override
    public boolean isEmpty() {
        return fileContent == null || fileContent.length == 0;
    }

    @Override
    public long getSize() {
        return fileContent.length;
    }

    @Override
    public byte[] getBytes() throws IOException {
        return fileContent;
    }

    @Override
    public InputStream getInputStream() throws IOException {
        return new ByteArrayInputStream(fileContent);
    }

    @Override
    public void transferTo(File file) throws IOException, IllegalStateException {
        try (FileOutputStream fos = new FileOutputStream(file)) {
            fos.write(fileContent);
        }
    }

}

直接调用Base64ToMultipartFile();方法即可，返回文件后上传至服务器，最后将上传的返回的url替换此段base64编码即可，如果获取此段base64编码，上面有获取到base64的头和尾下标截取即可，如果有多张图片，递归处理即可，方法中也有写到，下面查看视频演示

富文本粘贴图片上传