我正在尝试使用laravel和vue将图像上传到s3。我正在遵循本教程https://medium.com/@jagadeshanh/image-upload-and-validation-using-laravel-and-vuejs-e71e0f094fbb，但不确定保存base64字符串或实际的图像文件是否更好，因此两者都存在于我的请求中。
这是将文件保存到vue中的data。）时的文件console.log，它显然具有名称属性。
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”
{
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'),
}
这是我在vue中发布的方法
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",
如果我运行
$image['imageFile']->store('uploads', 's3');
我收到错误
"message": "Call to a member function store() on array",
如果我将name属性添加到文件中
$image['imageFile']['name]->store('uploads', 's3');
它告诉我没有“名称”这样的字段，这使我认为文件甚至没有到达后端。
以前有人建议在我的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": [
我试图将我的data（）放置在formData对象中，然后再将其发送到后端，但无法导航该对象。