如何解决使用 Livewire & Filepond 编辑模型时处理预先存在的图像
我有一个 Filepond 组件,非常适合将图片上传到帖子。
但是,当我需要编辑帖子及其预先存在的图像时,我在使用 Filepond 时遇到了困难。
我想用 Post 模型的预先存在的图像加载 Filepond。目标是允许用户在编辑 Post 模型时上传、删除和重新排序图像,然后更新数据库和文件系统。
这是我目前所拥有的:
<div
x-data=""
x-init="
// Plugins
FilePond.registerPlugin(FilePondPluginImagePreview);
FilePond.registerPlugin(FilePondPluginImageExifOrientation);
FilePond.registerPlugin(FilePondPluginFileValidateType);
FilePond.registerPlugin(FilePondPluginFileValidateSize);
FilePond.registerPlugin(FilePondPluginImageResize);
// Set options
FilePond.setOptions({
allowMultiple: true,allowReorder: true,itemInsertLocation: 'after',server: {
process: (fieldName,file,metadata,load,error,progress,abort,transfer,options) => {
@this.upload('images',progress)
},revert: (filename,load) => {
@this.removeUpload('images',filename,load)
},},// This allows me to reorder the images,essential resetting the $image variable in livewire component when ever th euser reorders the images in filepond
onreorderfiles(files,origin,target){
@this.set('images',null);
files.forEach(function(file) {
@this.upload('images',file.file);
});
},});
// Create Filepond
const pond = FilePond.create($refs.input,{
acceptedFileTypes: ['image/png','image/jpeg'],@if(optional($post)->images) // If we are editing a post and if that post has images
files: [
@foreach($post->images as $image)// Loop through each image for the post
{
// the server file reference
source: '{{ Storage::disk('post_images')->url($post->id . '/' . $image->filename.$image->extension) }}',@endforeach
],@endif
});
pond.on('addfile',(error,file) => {
if (error) {
console.log('Oh no');
return;
}
});
"
>
<div wire:ignore wire:key="images">
<input
id="image-upload"
type="file"
x-ref="input"
multiple
>
@error('images.*')
<p wire:key="error_images" class="mt-2 text-sm text-red-600" id="email-error">{{ $message }}</p>
@enderror
</div>
</div>
然而,这会导致每次用户查看编辑页面时重新上传所有图像。
网上有很多关于如何使用 filepond 和 livewire 上传图像的内容,但关于如何编辑的内容却并不多。
除了在用户每次查看编辑页面时重新上传之外,有没有更好的方法来管理图像?
对此的任何帮助将不胜感激。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。