Question

就像标题所述，我正在尝试将图像从VueJs上传到Laravel端点。我发现唯一的方法（如果还有其他方法，请告诉我）是通过请求发送图像的base64。在Vue方面，我认为所有内容均已涵盖。

但是，在Laravel方面，事情变得复杂了。我无法解码所传递的base64字符串，并且当我尝试将图像存储在我的AWS S3存储桶中时，它无法正确存储。这是代码：

VueJS

<template>
<input type="file" name="image" class="form-control" @change="imagePreview($event)">
</template>

methods: {
    submitForm(){
        axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';
        axios.post(this.$apiUrl + '/article', {
            image: this.image
        }).then(response => {
            flash(response.data.message, 'success');
        }).catch(e => {
            console.log(e);
        })
    },

    imagePreview(event) {
        let input = event.target;
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            let vm = this;
            reader.onload = e => {
                this.previewImageUrl = e.target.result;
                vm.image = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
}

Laravel：

    $this->validate($request, [
        'image' => 'required',
    ]);
    // return response()->json(base64_decode($request->image));

    $timestampName = microtime(true) . '.jpg';
    $url = env('AWS_URL') . '/article_images/' .$timestampName;

    Storage::disk('s3')->put($timestampName, base64_decode($request->image));

如果我添加了图像验证规则，它说它不是图像。

如果可能的话，我也想找回扩展名。

Answer 1

您可以在JS部分中使用FormData并在文件上使用getClientOriginalExtension()来获得Laravel中的扩展名。

VueJS

imagePreview(event) {
    let selectedFile = event.target.files[0];
    vm.image = selectedFile;
}

submitForm(){
    let fomrData = new FormData();
    formData.append('image', vm.image);
    axios.post(this.$apiUrl + '/article', formData, {
                headers: {
                  'Content-Type': 'multipart/form-data'
                }
            })
            .then(response => {
                 flash(response.data.message, 'success');
            })
            .catch(e => {
                console.log(e);
            });
}

Laravel

$this->validate($request, [
    'image' => 'required',
]);

$image = $request->file('image');

$extension = $image->getClientOriginalExtension(); // Get the extension
$timestampName = microtime(true) . '.' . $extension;
$url = env('AWS_URL') . '/article_images/' .$timestampName;

Storage::disk('s3')->put($url, file_get_contents($image));

Here is a link可能有用

希望有帮助。

VueJs Laravel图片上传

1 个答案: