开源富文本编辑器Quill的图片怎么上传到服务器

最近在开发web站点时经过各方比较后，决定使用开源富文本编辑器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、下面紧接着编写相关代码，代码中已有注释，这里不再赘述。

//自定义字体大小
    let Size = Quill.import("attributors/style/size");
    Size.whitelist = ['10px', '12px', '14px','16px', '18px', '20px', '32px', '64px'];
    Quill.register(Size, true);
    //自定义字体类型
    var Font = Quill.import("formats/font");
    var fonts = ["SimSun", "SimHei", "Microsoft-YaHei", "KaiTi", "FangSong", "Arial"];
    Font.whitelist = fonts;
    Quill.register(Font, true);
    //自定义表格
    Quill.register({
      'modules/table-better': QuillTableBetter
    }, true);
    //初始化Quill
    var editor = new Quill('#editor', {
      modules: {
        table: false,
        syntax: true,
        toolbar: {
          container: '#toolbar',
        },
        'table-better': {
          language: 'zh_CN',
          menus: ['column', 'row', 'merge', 'table', 'cell', 'wrap', 'copy', 'delete'],
          toolbarTable: true
        },
        keyboard: {
          bindings: QuillTableBetter.keyboardBindings
        }
      },
      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',
              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:application/json;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']=1024; //上传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图片上传至服务器的过程就完成了。完美实现了图片上传功能！