首页
> 计算机技术
> 前端开发
> 其他
开源富文本编辑器Quill的图片怎么上传到服务器
原创 lihf8515于2025年01月12日 14:51发表
来源:本站 阅读:215
最近在开发本站时经过各方比较后，决定使用开源富文本编辑器Quill作为后台文章编辑器。但是在使用中发现Quill的上传图片是直接将本地文件转换成Base64后嵌入的，这种情况下，会导致数据库字段在存储时长度不够而存储不完整。因此，我决定改造一下图片上传功能，将其上传至服务器中，返回上传后的文件url后显示和存储，这样就解决了上述问题。
下面详细讲解Quill的使用及图片上传到服务器的完整过程。代码中的Quill样式文件和js文件请到Quill官网下载
1、html页面引入css
<link href="../../css/quill.snow.css" rel="stylesheet">
2、html页面中使用div标签作为承载编辑器的容器
<div id="editor" style="height: 300px;"></div>
3、html页面底部引入js
<script src="../../js/quill.js"></script>
4、下面紧接着编写相关代码，代码中已有注释，这里不再赘述。
//初始化Quill
var editor = new Quill('#editor', {
modules: {
table: false,
},
theme: 'snow'
});
var toolbar = editor.getModule('toolbar');
toolbar.addHandler('image', imageUpload);
//重写图片上传功能
function imageUpload(value) {
//点击图片，则value值为true
if(value) {
//创建隐藏的文件上传input
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.click();
input.onchange = function() {
const file = input.files[0];
//判断文件是否为图片
if(! /image\/\w+/.test(file.type)) {
layer.msg('只能选择图片', {icon: 2});
return false;
} else {
//使用FormData创建键值对数据
var fd = new FormData();
fd.append('type', 'img');
fd.append('upload_file', file);
$.ajax({
type: 'post',
url: '../upload.php',
dataType: 'json',
contentType: false,
processData: false,
data: fd,
success: function (result) {
if (result.success === true) {//上传成功，准备将图片插入编辑框中
var imgUrl = result.url;//取得上传后返回所在的路径
var currentPosition = editor.getSelection().index;//取得图片应该所在的位置
editor.insertEmbed(currentPosition, 'image', imgUrl);//插入编辑框当前位置
layer.msg('上传成功');
} else {
layer.msg(result.msg, {icon: 2});
}
},
error: function (jqXHR) {
layer.msg('错误:' + jqXHR.status, {icon: 2});
}
});
}
}
}
}
5、编写服务端upload.php
<?php
header("Content-Type: text/html;charset=utf-8");
require_once '../include/conn.php';
require_once '../include/comm.php';
require_once("master_check.php");
$config=array();
$config['type']=array("flash","img"); //上传允许type值
$config['img']=array("jpg","bmp","gif","png"); //img允许后缀
$config['flash']=array("flv","swf","mp3","mp4"); //flash允许后缀
$config['flash_size']=200; //上传flash大小上限 单位：KB
$config['img_size']=1024; //上传img大小上限 单位：KB
$config['name']='tmp_'.makeNonceStr(10); //上传后的文件命名规则 这里以unix时间戳来命名
$config['flash_dir']="/upload/flash"; //上传flash文件地址 采用绝对地址 方便upload.php文件放在站内的任何位置 后面不加"/"
$config['img_dir']="/upload/img"; //上传img文件地址 采用绝对地址 采用绝对地址 方便upload.php文件放在站内的任何位置 后面不加"/"
$config['site_url']="http://www.hfsoft.top"; //网站的网址 这与图片上传后的地址有关 最后不加"/" 可留空
//输出调用
function ret($arr) {
echo(json_encode($arr));
exit();
}
//文件上传
uploadfile();
function uploadfile() {
global $config;
$type = $_POST['type'];
if(!in_array($type, $config['type'])) {
$arr = array('success'=>false, 'msg'=>'不支持的文件类型！');
ret($arr);
}
if(is_uploaded_file($_FILES['upload_file']['tmp_name'])) {
//判断上传文件是否允许
$filearr = pathinfo($_FILES['upload_file']['name']);
$filetype = $filearr["extension"];
if(!in_array($filetype, $config[$type])) {
$arr = array('success'=>false, 'msg'=>'不支持的文件类型！');
ret($arr);
}
//判断文件大小是否符合要求
if($_FILES['upload_file']['size'] > $config[$type."_size"]*1024) {
$arr = array('success'=>false, 'msg'=>'上传的文件不能超过'.$config[$type."_size"].'KB！');
ret($arr);
}
$file_abso = $config[$type."_dir"]."/".$config['name'].".".$filetype;
$file_host = $_SERVER['DOCUMENT_ROOT'].$file_abso;
if(move_uploaded_file($_FILES['upload_file']['tmp_name'], $file_host)) {
$arr = array('success'=>true, 'url'=>$file_abso);
ret($arr);
}else{
$arr = array('success'=>false, 'msg'=>'文件上传失败，请检查上传目录设置和目录读写权限！');
ret($arr);
}
}else{
$arr = array('success'=>false, 'msg'=>'文件上传失败！');
ret($arr);
}
}
至此，完整的Quill图片上传至服务器的过程就完成了。完美实现了图片上传功能！
阅读排行榜
皖公网安备34130202000765号