如何使用 AJAX post 验证 Laravel 7 内的 FormData 对象？

Question

一直在尝试不同的方法来使 FormData 对象在 Laravel 中得到验证。这是我的 javascript:

$("#submit-note").click(function(e) {
    e.preventDefault();
    var lead_id = $('input[name="lead_id"]').val();
    var note = $("#note").val();
    var file = $('#file-upload');

    let formData = new FormData($('#edit-form')[0]);

    //JSON.stringify(Array.from(formData));

    console.log(...formData);

    $.ajaxSetup({
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
        }
    });
    $.ajax({
        url: "/leadme/create-note",
        method: "POST",
        cache:false,
        dataType: false,
        processData: false,
        data: formData,
        success: function(response) {
            console.log('Formdata sent');
            console.log(response);
            $(".toast").toast("show");
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(jqXHR, textStatus, errorThrown);
        }
    });
});

然后由以下 Laravel 控制器接收：

public function createNote(Request $request)
    {
        $validated = $request->validate([
            '*.lead_id.*' => 'numeric|required',
            '*.note.*' => 'string|required',
            //'files.*' => 'mimes:jpeg, jpg, png, bmp, doc, pdf, mp3, svg, gif, webp|nullable|max:250000',
        ]);

        dd($validated);

        $lead = Lead::where('id', $request->lead_id)->first();

        $validated['date'] = date('Y-m-d');
        $validated['time'] = date('G:i');
        $validated['action'] = 'action';
        $validated['lead_status_option_id'] = 1;
        $validated['user_id'] = auth()->user()->id;

        if ($request->hasFile('files') && !empty($validated['files']->name)) {
            foreach ($request->files as $file) {
                //Get filename with the extension
                $fileNameWithExt = $file->getClientOriginalName();
                //Filename to store example: lead_4_document.pdf
                $fileNameToStore =  'lead_' . $lead->id . '_' . $fileNameWithExt;
                //Upload image
                $path = $file->storeAs('/storage/user_uploads', $fileNameToStore);

                dd($lead->uploadFile->update(array('filename' => $fileNameToStore, 'file_url' => $path)));
            }
        }
        Note::create($validated);
        //$lead->note->update(array('note' => $request->note));
        //$lead->update($validated);
    }

基本上这个控制器必须保存提交的笔记和可能附加的一些文件。虽然在我可以继续修复图像之前，我必须正确处理注释部分。另外，如果您想知道我为什么要这样做，这就是向我推荐的方法，显然它使多文件上传过程更容易。到目前为止，没有成功。感谢任何帮助，谢谢！

根据@Bazaim 的要求：

{"------WebKitFormBoundarybD9HBrf3Pp8mqc7o
↵Content-Disposition:_form-data;_name": ""_token"
↵
↵77fGMTkhrymzykdxDahWuriG5mItSJn1EX4j53…m
↵
↵
↵------WebKitFormBoundarybD9HBrf3Pp8mqc7o--"}
"------WebKitFormBoundarybD9HBrf3Pp8mqc7o ↵Content-Disposition:_form-data;_name": ""_token"
↵
↵77fGMTkhrymzykdxDahWuriG5mItSJn1EX4j53kY
↵------WebKitFormBoundarybD9HBrf3Pp8mqc7o
↵Content-Disposition: form-data; name="lead_id"
↵
↵13
↵------WebKitFormBoundarybD9HBrf3Pp8mqc7o
↵Content-Disposition: form-data; name="toggle_option-13"
↵
↵0
↵------WebKitFormBoundarybD9HBrf3Pp8mqc7o
↵Content-Disposition: form-data; name="toggle_option-13-13"
↵
↵2
↵------WebKitFormBoundarybD9HBrf3Pp8mqc7o
↵Content-Disposition: form-data; name="note"
↵
↵dgdgdg
↵------WebKitFormBoundarybD9HBrf3Pp8mqc7o
↵Content-Disposition: form-data; name="file[]"; filename=""
↵Content-Type: application/octet-stream
↵
↵
↵------WebKitFormBoundarybD9HBrf3Pp8mqc7o--"
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

这里是隐藏文本的扩展版本：“”_token”

77fGMTkhrymzykdxDahWuriG5mItSJn1EX4j53kY
------WebKitFormBoundarybD9HBrf3Pp8mqc7o
Content-Disposition: form-data; name="lead_id"

13
------WebKitFormBoundarybD9HBrf3Pp8mqc7o
Content-Disposition: form-data; name="toggle_option-13"

0
------WebKitFormBoundarybD9HBrf3Pp8mqc7o
Content-Disposition: form-data; name="toggle_option-13-13"

2
------WebKitFormBoundarybD9HBrf3Pp8mqc7o
Content-Disposition: form-data; name="note"

dgdgdg
------WebKitFormBoundarybD9HBrf3Pp8mqc7o
Content-Disposition: form-data; name="file[]"; filename=""
Content-Type: application/octet-stream


------WebKitFormBoundarybD9HBrf3Pp8mqc7o--"

实施 Bazaim 的编辑后：AJAX 看起来像这样：

$("#submit-note").click(function(e) {
    e.preventDefault();
    var lead_id = $('input[name="lead_id"]').val();
    var note = $("#note").val();
    var file = $('#file-upload');


    let formData = new FormData($('#edit-form')[0]);

    //JSON.stringify(Array.from(formData));

    console.log(...formData);

    $.ajaxSetup({
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
        }
    });
    $.ajax({
        url: "/leadme/create-note",
        method: "POST",
        cache:false,
        dataType: false,
        processData: false,
        contentType: false,
        data: formData,
        success: function(response) {
            console.log('Formdata sent');
            console.log(response);
            $(".toast").toast("show");
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(jqXHR, textStatus, errorThrown);
        }
    });
});

控制器是这样的：

public function createNote(Request $request)
    {
        //return response()->json($request->all());

        $validated = $request->validate([
            'lead_id' => 'numeric|required',
            'note' => 'string|required',
            //'files.*' => 'mimes:jpeg, jpg, png, bmp, doc, pdf, mp3, svg, gif, webp|nullable|max:250000',
        ]);

        $lead = Lead::where('id', $request->lead_id)->first();

        $validated['date'] = date('Y-m-d');
        $validated['time'] = date('G:i');
        $validated['action'] = 'action';
        $validated['lead_status_option_id'] = 1;
        $validated['user_id'] = auth()->user()->id;

        if ($request->hasFile('files') && !empty($validated['files']->name)) {
            foreach ($request->files as $file) {
                //Get filename with the extension
                $fileNameWithExt = $file->getClientOriginalName();
                //Filename to store example: lead_4_document.pdf
                $fileNameToStore =  'lead_' . $lead->id . '_' . $fileNameWithExt;
                //Upload image
                $path = $file->storeAs('/storage/user_uploads', $fileNameToStore);

                dd($lead->uploadFile->update(array('filename' => $fileNameToStore, 'file_url' => $path)));
            }
        }
        Note::create($validated);
        //$lead->note->update(array('note' => $request->note));
        //$lead->update($validated);
    }

笔记现已通过并成功更新。接下来只需要实现文件即可。

Answer 1

如果我懂weel，你有一个 lead_id.
但是您的验证器需要一个数字数组。

（我从 lead_id 行中删除了 *. & .*。）

更正：

$validated = $request->validate([
            'lead_id' => 'numeric|required',
            '*.note.*' => 'string|required',
            //'files.*' => 'mimes:jpeg, jpg, png, bmp, doc, pdf, mp3, svg, gif, webp|nullable|max:250000',
        ]);

你能改变你的 AJAX 呼吁：

（已添加 contentType: false,）

 $.ajax({
        url: "/leadme/create-note",
        method: "POST",
        cache:false,
        dataType: false,
        processData: false,
        contentType: false,
        data: formData,
        success: function(response) {
            console.log('Formdata sent');
            console.log(response);
            $(".toast").toast("show");
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(jqXHR, textStatus, errorThrown);
        }
    });

如何使用 AJAX post 验证 Laravel 7 内的 FormData 对象？

How to validate FormData object within Laravel 7 using AJAX post?

php

ajax

laravel

form-data