*使用quill富文本编辑器的插件，自定义formData图片上传

最新推荐文章于 2024-06-20 12:26:39 发布

杨西瓜

最新推荐文章于 2024-06-20 12:26:39 发布

阅读量4.2k

点赞数 2

分类专栏：插件/类库文章标签： vue的插件

本文链接：https://blog.csdn.net/qq_33862644/article/details/82975578

版权

官网地址：https://quilljs.com

项目需求：自带的上传图片是base64，直接入库的话，请求头太长，导致网页十分十分的卡，所以才改用formData自定义上传（改完之后，相当于覆盖了他本身自带的上传按钮，图标是一样的，就是说在外观上看不出来变化）

刚引入好的效果图：

当文本框中没有任何内容的时候，quill.container.firstChild.innerHTML默认为 <p><br></p>

上传图片后的效果：

代码是没问题的，因为我这是本地测试，图片只能传到固定的某个盘了，懒的改了...

上传视频后的结果：

前台代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>QuillDemo</title>

        <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
        <link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
        <style>
            body {
                padding: 10px 30px;
            }
            #editor {
                min-height: 180px;
            }
        </style>
    </head>

    <body>

        <form method="POST" action="test.php">
            <div>

最低0.47元/天解锁文章

杨西瓜

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
*使用quill富文本编辑器的插件，自定义formData图片上传

官网地址：https://quilljs.com项目需求：自带的上传图片是base64，直接入库的话，请求头太长，导致网页十分十分的卡，所以才改用formData自定义上传（改完之后，相当于覆盖了他本身自带的上传按钮，图标是一样的，就是说在外观上看不出来变化）刚引入好的效果图：当文本框中没有任何内容的时候，quill.container.firstChild.in...
复制链接

扫一扫

专栏目录