如何使用 vanilla javascript 通过 ajax 将多张照片上传到 Laravel 应用程序？

Posted 2023-03-15

【中文标题】如何使用 vanilla javascript 通过 ajax 将多张照片上传到 Laravel 应用程序？

【英文标题】：How can I upload multiple photos to a Laravel application through ajax using vanilla javascript?

【发布时间】：2019-03-12 04:32:25

【问题描述】：

我有这个表格，我需要能够通过 ajax 将数据发布到服务器，用户可以上传 1 张或多张照片，或者他们可能根本不上传任何照片，无论如何我如何发送从`type=file 输入并在后台上传到服务器？

这是表单的相关部分：

<form action="" method="POST" enctype="multipart/form-data">
            @csrf
                <label for="photos">Photos:</label>
                <input type="file" name="photos[]" id="photos" class="form-control" multiple>


                <button class="btn btn-success mt-3" onclick="ajaxify(event)">Submit</button>
            </div>
        </form>

这是 javascript 的相关部分：

function ajaxify(event) 
            event.preventDefault();
            let failedValidation = false;

           // I removed parts of the code where I load other dataand do validation, irrelevant to the question.

            let photos = [];


            if(document.getElementById('photos').value !== '') 
                photos = document.getElementById('photos');   // I know this is incorrect, but I don't know what to do here.
            

           // Here photos.value return something like c://fake/filename
           // And it doesn't return more than 1 file even, so anyway I am definitely doing this wrong.


            if(! failedValidation) 
                axios.post('/listing/create', 
                    client_name: name.value,
                    client_phone_number: client_phone_number.value,
                    category: category.value,
                    type: type.value,
                    governorate: governorate.value,
                    city: city.value,
                    space: space.value,
                    price: price.value,
                    furnished_status: furnished_status.value,
                    payment_type: payment_type.value,
                    initial_deposit: initial_deposit.value,
                    monthly_amount: monthly_amount.value,
                    notes: notes.value,
                    photos: photos.value, // So this should be an array of uploaded files.
                )
                .then((resp) => 
                    invalid.classList.add('d-none');
                    console.log(resp);
                )
            
        

我想要什么？ 是让我上传的文件在应用程序的服务器端可用于 Laravel，当我做一个正常的帖子并做 dd($request->photos); 我得到一个上传文件的数组，我不确定 ajax/json 是否可行，但这就是我想要处理照片的原因。

快速说明，如果这有什么不同的话，我正在使用 Laravel 媒体库包。

到目前为止我所做的正在研究此事，我读到我需要使用 FormData()，我以前从未使用过，我有几个的问题，我是否需要将我的所有数据放入 FormData() 对象中并将其提供给 axios？还是我只需要它来拍摄照片？我还没有尝试做这两件事，任何指导将不胜感激。

【问题讨论】：

你所有的数据都需要在一个formData对象中

在我这样做之后，我只需发送保存 FormData() 的变量和 axios 之类的数据：formdata?

是的，没错

@Paras 不幸的是，我已经这样做了，最终我将一个空对象发送到服务器。

【参考方案1】：

您只会得到一个文件，因为所有文件对象都存储在files 属性中的数组中。只需将它们附加到您的 photos 数组即可。

function ajaxify(event) 
  event.preventDefault();

  // use files attribute to get an array of the files
  var photoFiles = document.getElementById("photos").files;

  // using the array of files, create an array 'photos' of FormData objects
  let photos = [];
  for (let photo of photoFiles) 
    photos.push(new FormData(photo);
  

  // turn your 'photos' array into a javascript object
  let photos = arr2obj(photoFiles);

  // this should fix the empty array problem you were having
  // pass 'photos' to the ajax data

  // ....

编辑： 根据this post 的说法，正如其中一位评论者指出的那样，使用 AJAX 上传文件需要 FormData 对象。您的数组必须是 FormData 对象的数组。

编辑：通过 JSON 发送数组很麻烦。把你的数组变成一个对象。您可以使用像这样的简单函数从数组中构建一个对象。

function arr2obj(arr) 
  var obj = ;
  for (let i=0; i<arr.length; i++) 
    obj['photo'+i] = arr[i];
  
  return obj;

【讨论】：

在我完成了你推荐的操作之后，如果你能帮我解决这个问题，我会遗漏一些东西，当我 console.log(photos) 得到我按预期上传的文件时，但是当我在服务器上 dd($request->photos) 时，我得到一个空数组数组，假设我上传了 2 张图像，我得到这个：array:2 [ 0 => [] 1 => [] ] 我像这样将photos变量分配给axios，而不是photos:photos.value，我有photos:photos，我认为错误可能在这里，你知道吗？

不幸的是，我无法让它工作，我一直在尝试不同的东西，但它不起作用，无论如何 formData 总是空的，你甚至无法通过控制台检查它。 log()，当它被发送到服务器时它只是一个空数组，我最终这样定义它，var formData = new FormData(); formData.append('照片', photoFiles);在 axio.post 的所有其他内容下，我有这张照片：formData，但是当我 dd($request);.

@OmarTarek 看看this post。似乎问题是在 json 中发送数组可能很麻烦。检查第二次编辑。

我照原样复制并粘贴了第二个答案中的代码，只是为了查看该数组是否会发送到服务器，不，我再次得到一个空数组。

我终于找到了缺失的部分，在根据另一篇文章实施了你的最后一个建议之后，缺失的部分是为什么服务器得到一个空数组，原来是这个 axios.post(' /listing/create', data; formData, )，这是导致问题的原因，经过一番研究后，我将其更改为 axios.post('/listing/create', formData)，瞧，它终于起作用了，我迁移了其余的表单元素，以便将所有内容附加到 formData 对象，无论如何，非常感谢您提供了很大的帮助。