Uploading image to s3 as file or base64

Question

I am trying to upload an image to s3 using laravel and vue. I am following this tutorial https://medium.com/@jagadeshanh/image-upload-and-validation-using-laravel-and-vuejs-e71e0f094fbb I wasn't sure if it was better to save the base64 string or the actual image file so both exist in my request.

this is the console.log of the file upon saving it to my data() in vue, it clearly has a name attribute.

File {name: "Screen Shot 2019-11-18 at 6.06.42 PM.png", lastModified: 1574118408143, lastModifiedDate: Mon Nov 18 2019 18:06:48 GMT-0500 (Eastern Standard Time), webkitRelativePath: "", size: 278660, …}
lastModified: 1574118408143
lastModifiedDate: Mon Nov 18 2019 18:06:48 GMT-0500 (Eastern Standard Time) {}
name: "Screen Shot 2019-11-18 at 6.06.42 PM.png"
size: 278660
type: "image/png"
webkitRelativePath: ""
__proto__: File

the data() object in vue component is setup with an array of images. within each image is the file as "imageFile" and the base64 as "liveImage"

{
                image_count:1,
                max_uploads:5,
                totalsteps:4,
                step:1,
                slide:1,
                selectedImages:[
                    {
                        imageFile:"",
                        liveImage:"",
                        filter: null,
                        grayscale: 0,
                        sepia: 0,
                        saturate: 1,
                        hueRotate: 0,
                        invert: 0,
                        brightness: 1,
                        contrast: 1,
                        blur: 0,
                        suffix: {
                          hueRotate: 'deg',
                          blur: 'px'
                      },
                    },
                ],
                caption:"new post",
                starting_bid:"10",
                bid_increment:"10",
                end_time:"11-30-2019 12:11:00",
                bin:"100",
                snipe:true,
                snipe_time:"5",
                autoremove_bids:true,
                csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),

            }

This is my post method in vue

            handleSubmit: function()
            {
                axios.post('/p', this._data)
                  .then(function (response) {
                    console.log('response', response);
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
            },

This is my postsController@store, for now I am just trying to view the information. I am pushing both the files and the base64 strings into arrays and returning them. the base64 strings are there, but the file array seems to be an array of empty objects.

    public function store(Request $request)
    {
        //VALIDATES DATA
        $image_arr_file = [];
        $image_arr_base64 = [];
        foreach(request('selectedImages') as $image){
            array_push($image_arr_file, $image['imageFile']);
            array_push($image_arr_base64, $image['liveImage']);
        };
        return ['hi', $image_arr_file, $image_arr_base64];

which returns to the console

data: Array(3)
0: "hi"
1: Array(2)
0: []
1: []
length: 2
__proto__: Array(0)
2: (2) ["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD…gQhqG6aA5cJnIJCpocUGxOhuGgonBmJfzhSgYC4XCEWWf/9k=", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsA…og5vt2KPDXunBNViTxv8PUWjKYTBF7/gAAAAASUVORK5CYII="]
length: 3
__proto__: Array(0)

within that loop if i run

$image['liveImage']->store('uploads', 's3');

I get the error

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

If I run

            $image['imageFile']->store('uploads', 's3');

I get the error

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

If I add the name attribute to the file

$image['imageFile']['name]->store('uploads', 's3');

it tells me there is no such field as "name" which makes me think the file isn't even reaching the backend.

Previously someone suggested adding a multi-part header to my axios post

            handleSubmit: function()
            {
                const config = { headers: { 'Content-Type': 'multipart/form-data'}}

                axios.post('/p', this._data, config)
                  .then(function (response) {
                    console.log('response', response);
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
            },

which gives me an error and breaks my loop in the controller.

<b>Warning</b>:  Missing boundary in multipart/form-data POST data in <b>Unknown</b> on line <b>0</b><br />
{
    "message": "Invalid argument supplied for foreach()",
    "exception": "ErrorException",
    "file": "/Users/raj/challenges/instagrizzleTWC/instagrizzle/app/Http/Controllers/PostsController.php",
    "line": 26,
    "trace": [

I tried to put my data() in a formData object before sending it to the backend but could not navigate the object.

1. Should I be using formData object?
2. Should I be altering my base64 string before storing to s3?
3. Is my "imageFile" even reaching the backend? In a previous version I had working I was not able to see my image object in the console for whatever reason but I was still able to store it to s3.