Php 将图像作为文件或base64上载到s3

我正在尝试使用laravel和vue将图像上载到s3。我正在学习本教程。我不确定保存base64字符串或实际图像文件是否更好，以便两者都存在于我的请求中

这是文件的console.log在vue中将其保存到my data（）时，它显然有一个name属性

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

vue组件中的data（）对象是使用图像数组设置的。在每个图像中，文件为“imageFile”，base64为“liveImage”

这是我在vue中的post方法

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

这是我的postsController@store，目前我只是想查看信息。我将文件和base64字符串都推入数组并返回它们。base64字符串在那里，但文件数组似乎是一个空对象数组

    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];

返回控制台

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)

如果我跑的话，在这个循环中

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

我得到了错误

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

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

如果我跑

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

我得到了错误

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

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

如果我将name属性添加到文件中

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

它告诉我没有像“name”这样的字段，这让我觉得文件甚至没有到达后端

之前有人建议在我的axios帖子中添加一个多部分标题

            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);
                  });
            },

这给了我一个错误，并中断了控制器中的循环

<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": [

警告：多部分数据中缺少边界/表单数据发布第0行中未知的数据

{
“消息”：“为foreach（）提供的参数无效”，
“异常”：“ErrorException”，
“文件”：“/Users/raj/challenges/instagrizzleTWC/instagrizzle/app/Http/Controllers/PostsController.php”，
“行”：26，
“跟踪”：[

在将数据发送到后端之前，我试图将其放入formData对象中，但无法导航该对象

我应该使用formData对象吗

我应该在存储到s3之前更改base64字符串吗

我的“imageFile”甚至到达后端了吗？在我工作的前一个版本中，无论什么原因，我都无法在控制台中看到我的图像对象，但我仍然能够将其存储到s3

---

你可以使用FileReader。对你有帮助。祝你好运…：/FileReader不是php吗？不。但是你可以从FileReader获得base64。在Google上搜索。FileReader api JS你可以使用FileReader。对你有帮助。祝你好运…：/FileReader不是php吗？不。但是你可以从FileReader获得base64。在Google.FileReader api JS上搜索