Laravel + jQuery AJAX 文件上传？

Question

一个多星期以来，我一直在努力完成这项工作，但似乎没有任何效果。用户应该能够使用名称将文件上传到服务器，但不知何故 AJAX 没有发送任何内容。

这是用户上传文件的表单：

        <div class="data-attachment" data-id="">
            <div class="new-attachment">
            <form id="form-attachment" name="newAttachment">
                <input type="text" class="attachment-name" name="name" placeholder="Name">
                <input id="file" type="file" name="file" class="attachment-name">
                <input type="submit" name="submit" value="Add attachment" id="submit">
            </form>                    
            </div>
            <button class="btn-del">
                <i class="fa fa-times"></i>
            </button>
        </div>

这是提交表单时调用的函数：

        $('#form-attachment').on('submit', function (e) {
            e.preventDefault();
            form = document.forms.namedItem('newAttachment');
            formData = new FormData(form);
            reader = new FileReader();

            // data = {
            //     'name': formData.get('name'),
            //     'file': reader.readAsText($('#file')[0].files[0], 'UTF-8'),
            //     'task': $('#holder').data('id')
            // };

            console.log(formData.get('file'));

            $.ajax({
                method: 'POST',
                url: '/ajax/tasks/attachments/add',
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (response) {
                    alert(response);
                    // window.location.reload();
                },
                error: function (xhr, response, error) {
                    console.log(error);
                }
            })
        });

这是接收表单的 PHP 代码：

/**
 * @param Req $request
 *
 * @return void
 */
public function addAttachment(Req $request)
{
    if ($request->ajax()
        && $_SERVER['REQUEST_METHOD'] == 'POST'
        && $request->exists('file')
        && $request->exists('name')
        && $request->exists('task')
        && Auth::user()->hasRight('projects.tasks.attachments.add')
    ) {
        $oTask = Task::find($_POST['task']);
            if ($oTask) {

                Request::file('file')->store(
                    '/'.$oTask->project->id, 'local'
                );
                $oTask->attachments()->create([
                    'name' => $request->input('name'),
                    'file' => $request->file('file')
                ]);

                $oTask->project->logs()->save(
                    new Log(['description' => 'User ' . Auth::user()->nameFormatter() . ' added attachment ' . $_POST['name'] . ' to task ' . $oTask->name . ' in project ' . $oTask->project->name])
                );
            }
        }
    }

这些文件作为任务的附件，因此是“任务”索引。 我搜索了多个类似的问题，并尝试从答案中应用代码，但似乎没有任何效果。感谢您提供任何帮助或指出正确方向！

Answer 1

我看到它没有提交文件，因为您的表单锁定了enctype="multipart/form-data"

    <div class="data-attachment" data-id="">
        <div class="new-attachment">
        <form id="form-attachment" name="newAttachment" enctype="multipart/form-data">
            <input type="text" class="attachment-name" name="name" placeholder="Name">
            <input id="file" type="file" name="file" class="attachment-name">
            <input type="submit" name="submit" value="Add attachment" id="submit">
        </form>                    
        </div>
        <button class="btn-del">
            <i class="fa fa-times"></i>
        </button>
    </div>

也可以尝试将其附加到您的 formData 中

 if ($("#file")[0].files > 0) {
     var file = $("#file")[0].files[0];
     formData.append("file", file, file.name);
 }