js代码
var editor = grapesjs.init( {后端代码,php为例
showOffsets: 1,
noticeOnUnload: 0,
container: '#gjs',
height: '100%',
storageManager: false,
plugins: [
],
assetManager: {
upload: 'upload.php',
assets:assetdata,
uploadFile: (e) => {
const formData = new FormData();
var files = e.dataTransfer ? e.dataTransfer.files: e.target.files;
for (let i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}
fetch('/upload.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
assetdata.push(data);
console.log('上传成功!', data);
var myJSON = [];
$.each(data, function(key, value) {
myJSON[key] = value;
});
var images = myJSON;
// 更新资源管理器和预览区域中的文件列表
editor.AssetManager.add(images);
})
.catch(error => console.error('上传失败!', error));
},
uploadName: 'files',
// 上传文件的名称
headers: {
// 请求头
'Authorization': 'Bearer token'
}
},
fromElement: false,
});
<?php
$uploadDir = 'uploadfolder/'; // 上传文件的目录
if (!empty($_FILES['files']['name'][0])) {
$ret=[];
// 遍历上传的所有文件
foreach ($_FILES['files']['name'] as $key => $value) {
$fileName = basename($_FILES['files']['name'][$key]);
$targetFile = $uploadDir . $fileName;
$fileType = pathinfo($targetFile, PATHINFO_EXTENSION);
// 判断文件类型是否允许上传
if (in_array($fileType, array('jpg', 'jpeg', 'png', 'gif'))) {
// 将文件从临时目录移动到上传目录
if (move_uploaded_file($_FILES['files']['tmp_name'][$key], $targetFile)) {
// 生成返回数据
$ret[] = array(
'src' => $targetFile,
'name' => $fileName,
'type' => $_FILES['files']['type'][$key],
'size' => $_FILES['files']['size'][$key]
);
//将返回数据转换为JSON格式,并输出到客户端
}
}
}
echo json_encode($ret);
}
网友回复