如何在 livewire 2 应用程序中上传 laravel-medialibrary 中的图像？

Question

我在Laravel 8/livewire 2 app中添加了spatie/laravel-medialibrary 9、预览选中时我用的方法

    <input type="file" id="image" wire:change="$emit('fileChosen')">
    ... 

    Livewire.on('fileChosen', app_image_id => {
        alert('fileChosen' + app_image_id);
        let inputField = document.getElementById('image')
        let file = inputField.files[0]
        console.log('file::')
        console.log(file)
        let file_name = file.name

        // console.log('file_name::')
        // console.log(file_name)

        let reader = new FileReader()
        console.log('reader::')
        console.log(reader)
        //
        reader.onloadend = () => {
            window.livewire.emit('fileUpload', reader.result, file_name)
            // console.log('reader.result::')
            // console.log(reader.result)
        }
        reader.readAsDataURL(file)    
   })

   public function handleFileUpload($imageData, $file_name)
   {
       $this->uploaded_file_name = $file_name;
       $this->uploadedAppImageImage  = $imageData;
   }

作为 uploadedAppImageImage 的结果，我有上传文件的内容，看起来像一个长字符串：

File `data:image/png;base64,iVBORw0KGg c TC4u3U1VaLKoOgg...mCC` AAAAElFTkSuQmCC` does not exists

但是查看 laravel-medialibrary 图像添加方法 https://spatie.be/docs/laravel-medialibrary/v9/api/adding-files#addmediafromdisk 我没有看到我可以使用哪种方法来使用 $uploadedAppImageImage 中的图像内容？

更新第 1 部分： 我找到方法 addMediaFromString (https://spatie.be/docs/laravel-medialibrary/v9/api/adding-files#addmediafromstring) :

但是用我做了一些测试，发现上传的图片无效。我尝试解码 base64（我在上面写了文件内容的样子）。我尝试了几种方法，例如：

  ->addMediaFromString( base64_decode( str_replace(' ','+',$this->uploadedAppImageImage)) )

  ->addMediaFromString( base64url_decode($this->uploadedAppImageImage) )

最后一个方法写在这里https://www.php.net/manual/ru/function.base64-decode.php为：

function base64url_decode($data) {
    return base64_decode(str_replace(array('-', '_'), array('+', '/'), $data));
}

但是无论如何上传的图片都是无效的。我应该尝试哪种方法？

谢谢！

Answer 1

我找到了这段代码：

        list($type, $data) = explode(';', $data);
        list(, $data)      = explode(',', $data);
        $data = base64_decode($data);

转图有效！

如何在 livewire 2 应用程序中上传 laravel-medialibrary 中的图像？

How in livewire 2 app upload image in laravel-medialibrary?

laravel-livewire

laravel-medialibrary