如何将 Vue 图像对象发送到 Laravel 控制器？

Question

我正在尝试从 vue 前端发送一个 image 对象 到 laravel 控制器，以便它可以存储在公共存储中，但图像会被破坏。无法打开存储的图像文件并显示错误。

在此组件中：

<input v-if="!state.image" class="input-file" type="file" @change="onFileChange">

这些函数将输入图像转换为 base64 格式：

const createImage = (file) => {
    const reader = new FileReader();
    reader.onload = (e) => {
        state.image = e.target.result;
    };
    reader.readAsDataURL(file);
}

const onFileChange = (e) => {
    state.path = e.target.files[0].name
    const files = e.target.files;
    if (!files.length)
        return;
    createImage(files[0]);
}

并通过 ajax 请求将其发送

axios.post('/store', state)
    .then(res => {
        state.error = false
        router.push({name: 'artwork'})
    })
    .catch(err => {
        state.error = true
        setTimeout(() => state.error = false, 5000)
});

到 MediaController.php< /strong>：

<?php

namespace App\Http\Controllers;

use App\Models\Artwork;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;


class MediaController extends Controller
{
    public function store(Request $request)
    {
        $artwork = new Artwork;

        $artwork->name = $request->name;
        $artwork->path = '/storage/app/public/' . $request->path;
        $artwork->save();

        Storage::disk('public')->put($request->path, $request->image);

        return response()->json(null, 200);
    }
}

看起来 $request->image 中的 base64 图像数据 已损坏并保存在 /storage/app/public/1 中.jpg。

如何在不破坏图像的情况下将图像从 vue 组件获取到控制器，然后再获取到公共存储？

Answer 1

我认为 vue 将图像编码为 base64，因此解决方案是将其解码回 laravel。

我必须将这些行添加到 MediaController.php 中：

$image = str_replace('data:image/jpeg;base64,', '', $request->image);

Storage::disk('public')->put($request->path, base64_decode($image));