laravel - 如何将 base64 图像转换为 UploadedFile Laravel

Question

Vue 版本:2.6.10Laravel 版本:6.0我正在使用这个 vue upload package客户端一切正常(至少我是这么认为的)。但是在我使用 laravel 的服务器端，有一些问题。
这是我的 vue 发送方法:

        setImage: function (file) {
            let formData = new FormData();
            formData.append('file', file);
            axios.post(upload_route, formData , {
                headers: { 'Content-Type': 'multipart/form-data' }
            })
                .then(response => {
                    // upload successful
                })
                .catch(error => console.log(error));
        },

这是我的服务器端方法:

    public function upload(Request $request){
        $path = $request->file('file')->store('avatars');
        return response('upload success' , 200);
    }

当我将文件上传到服务器时，它给了我这个错误:

"message": "Call to a member function store() on null",

我在 setImage 中发送的文件对象功能是这样的(如果我用console.log记录它):

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQE...

Answer 1

我相信 file setImage 上的参数不是 File目的。所以$request->file('file')是 null ，因为您附上了 string (base64)，而不是文件。

你告诉我们来自 console.log 的输出是 base64 路径，那么您需要将该 (base64) 转换为文件。

由于您使用的是 Laravel，因此技术如下:

use Illuminate\Support\Str;
use Illuminate\Http\UploadedFile;
use Illuminate\Support\Facades\Storage;
use Symfony\Component\HttpFoundation\File\File;

.....

$base64File = $request->input('file');

// decode the base64 file
$fileData = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $base64File));

// save it to temporary dir first.
$tmpFilePath = sys_get_temp_dir() . '/' . Str::uuid()->toString();
file_put_contents($tmpFilePath, $fileData);

// this just to help us get file info.
$tmpFile = new File($tmpFilePath);

$file = new UploadedFile(
    $tmpFile->getPathname(),
    $tmpFile->getFilename(),
    $tmpFile->getMimeType(),
    0,
    true // Mark it as test, since the file isn't from real HTTP POST.
);

$file->store('avatars');

更新

由于您使用的是 vue-image-upload-resize ，我检查了它内置函数的文档以将输出从 base64 更改为 blob，因此您可以:

<image-uploader
    ...
    output-format="blob"
    ... />