上传文件为空 Laravel 5.4

Posted 2023-02-19

技术标签:

【中文标题】上传文件为空 Laravel 5.4【英文标题】：Upload file is empty Laravel 5.4 【发布时间】：2018-02-04 21:22:37 【问题描述】：

我正在尝试使用 ajax 在我的控制器中发送文件数据，但它不起作用。下面是代码结构；

表格

    <form id="contact_img" enctype="multipart/form-data">
      <input type="hidden" name="_token" value=" csrf_token() ">
      <input id="contact_image" name="contact_image" type="file" class="file">
      <input type="text" class="form-control" name="testtest" id="testtest" required>
      <button type="submit" class="btn-default">Save</button>
    </form>

AJAX

    $.ajax(
        url: " url('/') /admin/upload_contact_img",
        data: $("#contact_img").serialize(),
        success: function (data) 
          alert(data);
          location.reload();
        ,
    );

我的网络路由

Route::get('admin/upload_contact_img', 'admin_controller@contact_img_upload');

控制器

public function contact_img_upload(Request $form)
    if ($form->hasFile('contact_image'))
        echo $form->file('contact_image');

    else
        echo "empty";
    
    echo $form->testtest;

只有输入 testtest 显示值。

【问题讨论】：

How to use FormData for ajax file upload的可能重复 【参考方案1】：

问题是 Ajax 文件上传并不那么容易。例如，您需要实现 FileReader。

看到这个答案：Uploading files in html5 with Ajax

【讨论】：

【参考方案2】：

尝试使用 formData() 代替序列化表单。

 $("#contact_img").on('submit', function(e)
       e.preventDefault(); 
       var form = new FormData(e.target)          
      $.ajax(
        url: " url('/') /admin/upload_contact_img",
       data : form,
       processData: false,  // tell jQuery not to process the data
       contentType: false,  // tell jQuery not to set contentType
        success: function (data) 
          alert(data);
        ,
        type:'POST'
    );
    );

参见示例https://jsfiddle.net/cihkem/hk7u9kLf/

【讨论】：

【参考方案3】：

1) 在表单提交按钮中添加id

<form id="contact_img" enctype="multipart/form-data">
    <input type="hidden" name="_token" value=" csrf_token() ">
    <input id="contact_image" name="contact_image" type="file" class="file">
    <input type="text" class="form-control" name="testtest" id="testtest" required>
    <button type="submit" id="submitBtn" class="btn-default">Save</button>
</form>

2) 阿贾克斯

jQuery(document).ready(function($)

    $("#submitBtn").click(function(e) 

        e.preventDefault();
        var contact_image = $("#contact_image").prop("files")[0];
        var testtest = $("#testtest").val();
        var form_data = new FormData();
        form_data.append("contact_image", contact_image);
        form_data.append("testtest", testtest);

        $.ajax(
            url: './admin/upload_contact_img',
            type: "POST",
            data: form_data,
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            success: function(data)
                console.log(data.contact_image);
                console.log(data.testtest);
            ,
            error:function(error)
                console.log('Something went wrong');
            
        );
    );

);

3) 内部controller

public function contact_img_upload(Request $form)

    if( $form->hasFile('image')) 
        $image = $form->file('image');

        //Image handling code //
    

    $testtest = $form->testtest;
    return response()->json(['contact_image' => $image, 'testtest' => $testtest]);

如果您需要演示项目，只需克隆此项目Laravel-BoilerPlate-Template

【讨论】：

【参考方案4】：

只需将其放在控制器文件的顶部