javascript - Laravel 5.2 ajax 上传进度条和 VerifyCsrfToken.php 第 67 行中的 TokenMismatchException

Question

我正在尝试在图片上传中集成进度条。当我使用 PHP 提交表单时，我的代码工作正常，但是当我在进度条中包含 javascript 时，出现错误“VerifyCsrfToken.php 第 67 行中的 TokenMismatchException”。这是我的表格:

{!! Form::open(array('files' => true, 'class' => 'form', 'route' => ['backend.posts.uploadimage', $post->id])) !!}
    <div class="form-group">
        {!! Form::file('image', ['id' => 'image']) !!}
    </div>
    <hr>
    <input type="button" value="Upload Image" class="btn btn-info btn-sm" onclick="uploadImage()">
{!! Form::close() !!}

此表单生成带有 token 的隐藏输入字段:

<input name="_token" type="hidden" value="jGQWC2GljiSeZrL8wvfMaH490xHOh727345U6HzK">

我的javascript代码是这样的:

function uploadImage()
    {
        var file = document.getElementById("image").files[0];
        var id = {{ $post->id }};

        var formdata = new FormData();
        formdata.append("image", file);

        var ajax = new XMLHttpRequest();
        ajax.upload.addEventListener("progress", progressHandler, false);
        ajax.addEventListener("load", completeHandler, false);
        ajax.addEventListener("error", errorHandler, false);
        ajax.addEventListener("abort", abortHandler, false);
        ajax.open("post", "{{ route('backend.posts.uploadimage', $post->id) }}");
        ajax.send(formdata);
    }

    function progressHandler(event)
    {
        var percent = (event.loaded / event.total) * 100;
        document.getElementById("progressPercent").style.width = Math.round(percent);
    }
    function completeHandler(event)
    {
        document.getElementById("status").innerHTML = event.target.responseText;
        document.getElementById("progressPercent").style.width = 0;
    }
    function errorHandler(event)
    {
        document.getElementById("status").innerHTML = "Upload Failed";
    }
    function abortHandler(event)
    {
        document.getElementById("status").innerHTML = "Upload Aborted";
    }

我的 PostController 中上传图片的方法是这样的:

public function uploadImage(Requests\UploadImageRequest $request, $id)
    {
        $post = $this->posts->findOrFail($id);

        $image = $request->file('image');
        $imageName = $image->getPathName();
        $newImageName = $post->id . '-' . md5(microtime());
        $imageExtension = $image->getClientOriginalExtension();
        $imageFile = $newImageName . '.' . $imageExtension;
        $path = public_path();

        move_uploaded_file($imageName, $path . '/images/img_upload/' . $imageFile);

        $post->where('id', $id)->update(['image_name' => $newImageName, 'ext' => $imageExtension]);

        return view('backend.posts.uploadimage');
    }

我如何使用纯 javascript 从隐藏字段发布 token ，或者是否有任何其他解决方案来解决此问题？请帮忙。

Answer 1

使用getElementsByName()获取输入字段的值。

var _token = document.getElementsByName('_token')[0].value;
//and append the value to form data
formdata.append("_token", _token);