Question

我正在尝试同时上传多张图片，在请求之后，将它们显示在同一页面上，在表单下方，以便稍后（多次上传后）我可以选择我想要保留的图片。我使用了这里找到的所有可能的答案（How to upload multiple files using PHP, jQuery and AJAX，
Uploading Multiple Files using AJAX and PHP），但没有成功。

我一直收到TokenMismatchException

VerifyCsrfToken.php第68行中的

500（内部服务器错误）+ TokenMismatchException：

有什么想法吗？

这是我的代码：

HTML：

<form id="uploadForm" enctype="multipart/form-data">
   <div class="container upload-picture-device">
      <div class="col-md-2 col-sm-1 col-xs-12"></div>
         <div class="col-md-4 col-sm-5 col-xs-12">
             <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-btn">
                            <span class="btn btn-de-pe btn-file">
                                Choose <input id="fileInput" type="file" name="files[]" class="pics" multiple>
                            </span>
                        </span>
                        <input type="text" class="form-control input-upload" readonly>
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-5 col-xs-12 text-left">
                <button id="uploadPhotos" type="submit" class="btn-continua">Upload picture</button>
            </div>

        </div>
        </form>

使用Javascript：

$('#uploadForm').submit(function (e) {
    e.preventDefault();

    var form = new FormData();
    var files = document.getElementsByClassName('pics');
    for (var i=0; i<files.length; i++) {
        form.append("files[pic" + i + "]", files[i][0]); // add receipt to form
    }
    form.append('action', 'upload-photos'); // specify action

    $.ajax({
        url: '{{url("/photos/device")}}',
        type: 'POST',
        data: form,
        cache: false,
        processData: false,
        contentType: false,
        success:function(data) {
            console.log(data);
        },
        error: function(xhr, desc, err) {
            // I have some error handling logic here
        }
    });
});

Answer 1

在您的情况下，您有2个表格

<form id="uploadForm" enctype="multipart/form-data">

var form = new FormData();

我认为＆＃34; TokenMismatchException＆＃34;来自第二种形式，所以你可以用第二种形式附加csrf_token

See this question

Answer 2

您正在发出AJAX请求而不发送csrf令牌。您正在创建新的空表单数据，而不是使用实际表单。

您可以查看documentation，了解在请求中包含csrf令牌的不同方法。

基本上你可以在ajax请求之前做这样的事情：

form.append('_token', {{ csrf_token() }})

上传多个图像，TokenMismatch错误，虽然我在表单中有令牌。有任何想法吗？

2 个答案: