使用 Ajax 和 Laravel 5.6 上传多张图片答案

【问题标题】：Multiple Image Upload using Ajax with Laravel 5.6使用 Ajax 和 Laravel 5.6 上传多张图片
【发布时间】：2018-12-29 12:59:31
【问题描述】：

首先我想为我的工程师道歉。

其次我不想使用任何插件。

我想上传多张图片，我可以不用 ajax，但我想用 Ajax 上传。我把我的代码放在这里。

<form action="{{route('image-upload.store')}}" method="post" enctype="multipart/form-data">
   {{csrf_field()}}
   <input type="file" id="image-upload" name="image_upload[]" enctype="multipart/form-data" multiple>  

  <button type="submit">save</button>
</form>

控制器：

if ($request->hasFile('image_upload')) {
        $images = $request->file('image_upload');
        foreach ($images as $image) {
            $randonName = rand(1, 200);
            $name = $image->getClientOriginalName();
            $storename = $randonName . '_' . $name;
            $image->move(public_path('images/test'), $storename);
        }
    }

return redirect()->back();

以上代码只需上传多张图片，无需 Ajax。

这里是阿贾克斯：

html：

 <input type="file" id="image-upload" name="image_upload[]" enctype="multipart/form-data" multiple>

阿贾克斯：

 $.ajaxSetup({
     headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
 });

$('#image-upload').change(function () {
    event.preventDefault();
    let image_upload = new FormData();
    let TotalImages = $('#image-upload')[0].files.length;  //Total Images
    let images = $('#image-upload')[0];  

    for (let i = 0; i < TotalImages; i++) {
        image_upload.append('images', images.files[i]);
    }
    image_upload.append('TotalImages', TotalImages);

    $.ajax({
        method: 'POST',
        url: '/image-upload',
        data: image_upload,
        contentType: false,
        processData: false,
        success: function (images) {
            console.log(`ok ${images}`)
        },
        error: function () {
          console.log(`Failed`)
        }
    })

})

控制器：

  if ($request->images) {
        $images = $request->images;
        $total=$request->TotalImages;
        $imagesName = $images->getClientOriginalName();
       $randonName = rand(1, 200);
        $images->move(public_path('/images/test'), $randonName . '.jpg');
        return response()->json($randonName);
    }

现在此代码可以正常工作，但仅适用于一张图像。我知道我把它放在了Loop 并且我做了但是没有得到我的回应。

如果有人能告诉我怎么做？

这是我的努力：

 if ($request->images) {
       $total=$request->TotalImages;
        $images = $request->images;
        for($j=0; $j<$total;$j++){
            $imagesName = $images->getClientOriginalName();
            $randonName = rand(1, 200);
            $images->move(public_path('/images/test'), $randonName . '.jpg');
        }
        return response()->json($randonName);
    }

  if ($request->images) {
        $images = $request->images;
        foreach ($images as $image) {
            $imagesName = $images->getClientOriginalName();
            $randonName = rand(1, 200);
            $image->move(public_path('/images/test'),$randonName . $imagesName . $randonName . '.jpg');
        }
    }

【问题讨论】：

对于这个 $request->images 变量你得到什么输出？
返回响应()->json($request->images); .Output 是一个对象（ [object Object] ）
您能在您的问题中回复吗？
谢谢，但我发现了问题。只需要替换这个简单的 ajax 代码：image_upload.append('images[]', images.files[i]);
然后发布一个对别人有帮助的答案或者删除这个问题

标签： php jquery ajax laravel image-uploading

【解决方案1】：

这也可以工作，这将发送图像数组以便在控制器中轻松获取它

        for (let i = 0; i < TotalImages; i++) {
            image_upload.append('images[]', images.files[i]);
        }

【讨论】：

【解决方案2】：

如下更新您的代码：

for (let i = 0; i < TotalImages; i++) {
    image_upload.append('images', images.files[i]);
}

到

for (let i = 0; i < TotalImages; i++) {
    image_upload.append('images' + i, images.files[i]);
}

这应该可以帮助您提交多张图片。

【讨论】：

如果在迭代中加上+i...formdata会在name文件前面加上迭代次数...所以images0...images1等...你会怎么读这是在服务器端？