vue3 tinymce 富文本 粘贴图片实时发送请求到SpringBoot后端 并保存

tinymce 富文本 的粘贴图片实时上传

• vue3的tinymce富文本的使用：
• 步骤一 修改images_upload_handler函数：
• 步骤二 后端代码 ：
• 步骤三 nginx配置：

使用到的技术：
vue3 tinymce富文本 、SpringBoot 、nginx

最终实现效果：
tinymce富文本编辑器里面粘贴图片，上传到后端处理，然后保存到本地文件夹里面，并且利用nginx回显

vue3的tinymce富文本的使用：

参考下面这位老哥的文章：
链接: 在vue3.0项目中使用tinymce富文本编辑器 作者：mrjimin.

步骤一 修改images_upload_handler函数：

通过源代码

可以看到原作者把上传的图片转换为base64，并且把转换后的数据直接放到了 src标签里面

<img src="转换后的base64" alt="" width="250" height="250" /></p>

所以我们要做的是把这里改为上传图片到后端并且利用nginx把返回的数据URL放到这个src里面
原文：

        images_upload_handler: (blobInfo, success, failure) => {
          // 这里用base64的图片形式上传图片,
          let reader = new FileReader(); //本地预览
          reader.readAsDataURL(blobInfo.blob());
          reader.onloadend = function () {
            const imgbase64 = reader.result;
            success(imgbase64);
          };
        },

把以上代码改为：

        images_upload_handler: (blobInfo, success, failure, progress) => {
          let blob = blobInfo.blob();
          let data = new FormData();
          data.append('file', blob);
          // 把图片发送到后端
          axios.post("http://localhost:8082/upload", data, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }).then(function (res) {
          //并且把返回之后的数据给加载到图片上面
            success(res.data.data);
          })
        },

步骤二 后端代码 ：

当然上传这块可以根据自己的需求上传，比如说上传到 云储存之类的
编写Controller层：

/**
 * @author Fan_yoo
 * @date 2022/4/11
 */
@RestController
public class FileUploadController {

    @Resource
    private FileUploadServiceImpl fileUploadService;

    /**
     * 文件上传
     * 通过 nginx 代理访问返回的图片路径
     *
     * @param file    通过富文本编辑器实时传输过来的图片
     * @param request 请求
     * @return 示例：{"code":200, "msg":"上传成功", "src":"http://www.kaotop.com/file/tupian/20220506/img.jpg"}
     */
    @PostMapping("/upload")
    public Result<String> fileUpLoad(MultipartFile file, HttpServletRequest request) {
        return fileUploadService.upload(file, request);
    }

}

Service接口:

/**
 * @author Fan_yoo
 * @date 2022/4/13
 */
public interface FileUploadService {

    /**
     * 上传文件
     * @param file 图片文件
     * @param request 请求
     * @return Result 示例：{"code":200, "msg":"上传成功", "src":"http://www.kaotop.com/file/tupian/20220506/img.jpg"}
     */
    Result<String> upload(MultipartFile file, HttpServletRequest request);
}

实现类：

/**
 * @author Fan_yoo
 * @date 2022/4/12
 */
@Service
public class FileUploadServiceImpl implements FileUploadService {

    private static final Logger logger = LoggerFactory.getLogger(FileUploadServiceImpl.class);
    
    // 图片存放的路径
    private final static String FILE_PATH = "E:\img\images\";

    //  拼接nginx路径
    private static final String NGINX_PATH = "http://localhost/images/";

    /**
     * 文件上传
     *
     * @param file    文件
     * @param request 请求
     * @return 文件上传结果
     */
    @Override
    public Result<String> upload(MultipartFile file, HttpServletRequest request) {
        final File folder = new File(FILE_PATH);
        if (!folder.exists()) {
            if (folder.mkdir()) {
                logger.info("文件夹创建成功");
            }
        }
        final String newName = UUID.randomUUID() + ".jpg";
        try {
            file.transferTo(new File(folder, newName));
            String url = NGINX_PATH + newName;
            logger.info("文件上传成功 url = {}", url);
            return Result.success(CommonCodeEnum.FILE_UPDATE_SUCCESS, url);
        } catch (IOException e) {
            return Result.error(CommonCodeEnum.FILE_UPDATE_FAIL);
        }
    }
}

步骤三 nginx配置：

修改 conf文件夹下面的 nginx.conf 配置

并在配置中找到 server 修改成下图所示：
alias 就是你要存放图片的路径

记得启动 nginx 或者重启 nginx

测试是否成功：

我们随便截个图然后粘贴过去看看

然后我们查看源代码：

再看后台：

本地文件夹：

可以看到已经上传成功了

转载注明出处