php - ckeditor5 vue检查图像已经被删除
问题描述
我在这个包中使用 ckeditor5 vue 版本作为我的文章表单,它还附带了通过添加此代码处理图像上传的示例
UploadAdapter: function (loader) {
this.loader = loader
this.upload = () => {
const body = new FormData();
body.append('gambar', this.loader.file);
let token = window.localStorage.getItem('token');
return fetch('https://bkcuvue.test/api/v1/artikel/upload', {
headers: {"Authorization": 'Bearer ' + token},
body: body,
method: 'POST'
})
.then(response => response.json())
.then(downloadUrl => {
return {
default: downloadUrl
}
})
.catch(error => {
console.log(error);
});
}
this.abort = () => {
console.log('Abort upload.')
}
},
然后在我的后端(laravel)就是这样
public function upload(Request $request)
{
if(!empty($request->gambar))
$fileName = Helper::image_processing($this->imagepath,$this->width,$this->height,$request,'');
else
$fileName = '';
return response()->json('/' . $this->imagepath . $fileName . '.jpg');
}
到ckeditor组件
<vue-ckeditor type="classic" v-model="htmlContent" :upload-adapter="UploadAdapter"></vue-ckeditor>
它有效!但是我很快意识到的问题是因为这种方法是将图像上传到服务器,然后将图像路径返回到或编辑器,它将作为纯 html 标签保存到数据库中......
然后,例如,如果我上传图像,然后我想删除或更改图像,那么编辑器将从编辑器中删除 img 标签,但不会删除服务器上的真实图像文件....
图像文件将保留在服务器上,除非我选择图像并通过 ftp 或 ssh 手动进入服务器自己删除它,否则我无法删除它。
有什么方法可以检查图像标签是否被删除,然后它将在服务器上删除。或者也许后端有一种方法可以检查该图像文件是否未被任何文章使用...
而且如果我两次上传相同的图像,那么它也会向服务器上传两次相同的文件,我如何检测相同的图像文件是否已经在服务器上并且不上传重复但立即返回图像路径
解决方案
我使用这种方法,上传图片并保存 URL。当我发送编辑器的内容时,也发送 URL,在服务器上我比较 URL 是否在编辑器的内容中,而那些不是我删除相应的文件。
客户:
onChange={ ( event, editor ) => {
this.state.description = editor.getData();
var vm = this
var urls = Array.from( new DOMParser().parseFromString( editor.getData(), 'text/html' )
.querySelectorAll( 'img' ) )
.map( img => img.getAttribute( 'src' ) );
urls.forEach(function(element) {
if (String(element).length > 10) {
if (vm.state.filesCKeditor.length > 0) {
if(filter(vm.state.filesCKeditor, function(o) { return String(o) === String(element) }).length == 0)
{
vm.state.filesCKeditor.push(element)
}
}else{
vm.state.filesCKeditor.push(element)
}
}
});
}}
服务器:
foreach (explode(',',$this->post('filesCKeditor')) as $value) {
# code...
if (!isset(explode($value,$this->post('content'))[1])) {
print_r('false');//add code for delete image
}
}
推荐阅读
- javascript - 用画布中的形状动画线条
- ruby-on-rails - 当同一模型有两个 has_one 关联时,Rails 5 Form 无法正确保存
- javascript - 执行exe时在nodejs中显示弹出消息或进度条
- javascript - 在 ReactJS 中获取窗口位置
- delphi - FMX TEdit 在键盘为 Microsoft 拼音时出现不良行为
- azure - 仅在生产中使用 Azure 网络安全组而不是独立防火墙是否合适?
- javascript - 将弹出框放在 noUiSlider 手柄上
- javascript - 角度指令上的正则表达式仅返回 false
- vue.js - 在 DOM 更改之前使用 vue-router 更改路由时触发事件?
- java - android firebase数据库如何从子节点检索所有数据