ECSHOP+Ckeditor5图片上传【PHP】

最新推荐文章于 2024-08-13 03:07:55 发布

原创最新推荐文章于 2024-08-13 03:07:55 发布 · 723 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ecshop #ckediter5 #php

ckediter5 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何解决ECSHOP+Ckeditor5环境下的图片上传问题，通过自建适配器及服务端脚本实现图片上传功能，确保上传过程的稳定性与效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ECSHOP+Ckeditor5图片上传【PHP】

版本

classic

原来的坑

ClassicEditor
    .create( document.querySelector( '#editor' ),{
		language: 'zh-cn',
		toolbar: ["heading", "blockQuote", "imageUpload", "undo", "redo"],
			ckfinder: {
		           uploadUrl: "test.php?act=upload"
		       }
		})
    .then( editor => {
		window.editor = editor;
            };
    })
    .catch( error => {
        console.error( error );
    });

已上传至服务器，返回[“uploaded”:true, “url”:“image-path…”]或[“uploaded”:1, “url”:“image-path…”]均无效。

解决方案

前端

自建适配器

ClassicEditor
    .create( document.querySelector( '#editor' ),{
		language: 'zh-cn',
		toolbar: ["heading", "blockQuote", "imageUpload", "undo", "redo"]
		})
    .then( editor => {
		window.editor = editor;
		//加载适配器
		editor.plugins.get('FileRepository').createUploadAdapter = (loader)=>{
                return new UploadAdapter(loader);
            };
    })
    .catch( error => {
        console.error( error );
    });

class UploadAdapter {
    constructor(loader) {
        this.loader = loader;
    }
    upload() {
        return new Promise((resolve, reject) => {
            const data = new FormData();
            data.append('upload', this.loader.file);
            data.append('allowSize', 2);
            $.ajax({
                url: 'test.php?act=upload',
                type: 'POST',
                data: data,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (data) {
                    if (data.res) {
                        resolve({
                            default: data.url
                        });
                    } else {
                        reject(data.msg);
                    }

                }
            });
           
        });
    }
    abort() {
    }
}

服务端

if ($_REQUEST['act'] == 'upload')
{
	require_once(ROOT_PATH . 'includes/cls_image.php');
	$image = new cls_image();
	
    //$uploadFilename = $_FILES['upload']['name']; 
    $uploadFilesize = $_FILES['upload']['size'];
	//上传图片不大于2M
    if($uploadFilesize > 1024*2*1000){
		$arr = array(
			'res' => false,
			'msg' => 'Pictures larger than 2M'
		);
		$json = stripslashes(json_encode($arr)); //去除反斜杠
		echo $json;
		exit;
    }
    //上传图片
	$headimg_original = $image->upload_image($_FILES['upload'],'actimage');
	if($headimg_original){
		$arr = array(
			'res' => true,
			'url' => $headimg_original
		);
	}else{
		$arr = array(
			'res' => false,
			'msg' => 'Image upload failure'
		);
	}
	$json = stripslashes(json_encode($arr)); //去除反斜杠
	//error_log($json, 3, "errors.log");
	echo $json;
}