我正在使用 laravel 和 livewire 堆栈（livewire 3），并且我有这个保存功能
public function save(): void
{
$this->editing = false;
$this->validate();
$admin = auth()->user();
$this->gallery->user_id = $admin->id;
$this->gallery->applied_to = $this->applied_to;
$this->gallery->description = $this->description;
$newImageUploaded = false;
if ($this->path instanceof UploadedFile) {
// Delete the old image file if it exists
Storage::delete("serviceImages/" . $this->gallery->path);
// Save the new image file
$filename = $this->path->store("/", "serviceImages");
$this->gallery->path = $filename;
$newImageUploaded = true;
}
if (!$newImageUploaded && $this->gallery->getOriginal("path")) {
// If no new image was uploaded and the original model has an image, retain the original path
$this->gallery->path = $this->gallery->getOriginal("path");
}
$this->gallery->save();
$this->showGalleryModal = false;
$this->dispatch('notify', 'Image saved');
}
当我在服务器上上传第一个图像时，图像会被上传，但是当我尝试使用不同的图像更新上传的图像或添加新图像时，我会得到
error uploading image<div
wire:ignore
x-data
x-init="
FilePond.registerPlugin(FilePondPluginImagePreview);
FilePond.setOptions({
allowMultiple: {{ isset($attributes['multiple']) ? 'true' : 'false' }},
server: {
process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
@this.upload('{{ $attributes['wire:model'] }}', file, load, error, progress)
},
revert: (filename, load) => {
@this.removeUpload('{{ $attributes['wire:model'] }}', filename, load)
},
},
});
FilePond.create($refs.input);"
>
<input type="file" x-ref="input"/>
</div>
这是 filepond 组件与字段一起被调用的地方
<div>
<div class="flex justify-end mr-3">
<x-button class="mb-5" wire:click="addImage">
Add image
</x-button>
</div>
<div class="bg-white overflow-y-auto shadow-md sm:rounded-lg ml-2 mr-2 rounded-md">
<x-table.table>
<x-slot name="head">
<x-table.table-heading class="px-6 py-6">
{{ __('Applied to') }}
</x-table.table-heading>
<x-table.table-heading class="px-6 py-6">
{{ __('Description') }}
</x-table.table-heading>
<x-table.table-heading class="px-6 py-6">
{{ __('Image') }}
</x-table.table-heading>
<x-table.table-heading class="flex justify-center px-6 py-6">
{{ __('Actions') }}
</x-table.table-heading>
</x-slot>
<x-slot name="body">
<x-dialog-modal wire:model="showGalleryImageModal">
<x-slot name="title">Service image</x-slot>
<x-slot name="content">
<div>
@if ($gallery->path)
<img id="path" src="{{ Storage::disk('serviceImages')->url($gallery->path) }}" alt="Gallery Image" class="mb-4 mt-4 rounded-lg shadow-md">
@endif
</div>
</x-slot>
<x-slot name="footer">
<x-secondary-button wire:click="$set('showGalleryImageModal', false)" class="mr-2"> Cancel
</x-secondary-button>
</x-slot>
</x-dialog-modal>
@forelse ($galleries as $gallery)
<tr class="bg-white border-b dark:bg-gray-700"
wire:loading.class.delay="opacity-50 dark:opacity-95" wire:key="{{ $gallery->id }}">
<td class="px-6 py-4 text-gray-900 dark:text-gray-200">
{{ ucwords($gallery->applied_to) }}
</td>
<td class="py-4 text-gray-900 dark:text-gray-200">
{{ Str::words(ucwords($gallery->description),3) }}
</td>
<td class="px-6 py-4 text-gray-900 dark:text-gray-200">
<a href="#" wire:click="expandImage({{ $gallery->id }})">
<img src="{{ Storage::disk('serviceImages')->url($gallery->path) }}" alt="Service images" class="h-8 object-cover rounded-full w-8">
</a>
</td>
<td class="px-6 py-4 text-gray-900 dark:text-gray-200">
<div class="flex justify-center">
<x-secondary-button wire:click="edit({{ $gallery->id }})" class="mr-3">
{{ __('Edit') }}
</x-secondary-button>
<x-danger-button wire:click="delete({{ $gallery->id }})" wire:confirm="Are you sure you want to delete?">
{{ __('Delete') }}
</x-danger-button>
</div>
</td>
</tr>
@empty
<tr class="bg-white border-b dark:bg-gray-700">
<td class="px-6 py-4 text-gray-900" colspan="5">
<div class="flex justify-center text-gray-400">
{{ __('Enter some images for your services') }}
</div>
</td>
</tr>
@endforelse
</x-slot>
</x-table.table>
</div>
@include('components.gallery.gallery-form')
</div>
当我在本地上传图像时，一切正常，但在生产服务器上却崩溃了。我正在使用 S3，一切都配置正确。任何帮助表示赞赏。先谢谢你了
当我打开 chrome dev dools 时，我也收到此错误
Uncaught ReferenceError: message is not defined
at added (livewire.js?id=2f6e5d4d:7039:11)
at swapElements (livewire.js?id=2f6e5d4d:6255:7)
at patch (livewire.js?id=2f6e5d4d:6225:16)
at Object.morph (livewire.js?id=2f6e5d4d:6438:5)
at morph2 (livewire.js?id=2f6e5d4d:6999:20)
at livewire.js?id=2f6e5d4d:7070:7
livewire.js?id=2f6e5d4d:4189 Uncaught Snapshot missing on Livewire component with id: m3nUjdglWrHTDRjNQTzM
Vh0W0esX7oVUKrrtnBp52MjQ3rYmmaFaVU7M6OdZ.jpg:1
Failed to load resource: the server responded with a status of 403 (Forbidden)
everythinghairsalon.nyc/:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
Vh0W0esX7oVUKrrtnBp52MjQ3rYmmaFaVU7M6OdZ.jpg:1
我被困在这一点上
错误已解决。这不是代码问题，而是亚马逊 s3 权限问题