无法使用 JQuery AJAX 将图像 + 文本数据上传到 Laravel

Posted 2023-03-21

【中文标题】无法使用 JQuery AJAX 将图像 + 文本数据上传到 Laravel

【英文标题】：Can't Upload Image + Text data using JQuery AJAX to Laravel

【发布时间】：2019-12-01 06:25:35

【问题描述】：

我正在尝试通过 ajax 上传包含文件的表单，但是在服务器端我只得到了一个无法使用的纯文本。

如果我使用 processData: false、contentType: false 和 cache: false，就会发生这种情况，如果我不使用它们，文件将不会上传。

javascript：

$("#purchase-attachment-form").on('submit', function (e) 
    if ($('#paf_input').get(0).files.length === 0) 
        alert('Please Select A file');
        return;
    
    e.preventDefault();
    $.ajax(
        url: "route('add_attachment_to_purchase')",
        data: new FormData($("#purchase-attachment-form")[0]),
        type: 'post',
        processData: false,
        cache: false,
        success: function (data) 
            alerts(data, 'Adding Purchase Attachment');
        ,
        error: function (jqXHR, textStatus, errorThrown) 
            alerts(2, "Adding Purchase Attachment");
        
    );
);

html：

<form id="purchase-attachment-form" class="modal-content">
    <div class="modal-header">
        <h4 class="modal-title" id="defaultModalLabel">Add Attachment</h4>
    </div>
    <div class="modal-body">
        <div class="row clearfix">
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Type</label>
                    <div class="form-line">
                        <select class="form-control select" name="type">
                            <option value="quotation">Quotation</option>
                            <option value="conparison">Comparison</option>
                            <option value="invoice">Invoice</option>
                            <option value="payment_offer">Payment Offer</option>
                        </select>
                        <input type="hidden" name="purchase" id="purchase_on_attachment" value="encrypt($purchase->id)"class="form-control" />
                    </div>
                </div>
            </div>
            @csrf
            <div class="col-lg-6">
                <div class="form-group">
                    <input type="file" class="hidden" id="paf_input" name="attachment" required />
                    <button type="button"  id="paf_btn" onclick="$('#paf_input').trigger('click');" class="material-icons waves-effect btn btn-circle">add</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary waves-effect">Add</button>
        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">CLOSE</button>
    </div>
</form>

控制器：

public function create(Request $request) 
//        return $request->all();
//        return $request->getContent();
        $this->validate($request, [
            'type' => 'required',
            'purchase' => 'required',
            'attachment' => 'required',
        ]);
        $role = \App\Role::where('role', strtoupper(auth()->getDefaultDriver()))->first();
        if ($role == null) 
            return '2';
        
        $role_id = $role->id;
        $time = time();
        if ($request->hasFile('attachment')) 
            $attachment = $request->file('attachment');
            $att_file_name = $attachment->getClientOriginalName();
            $att_file = ($time++) . $att_file_name;
            $att_file_saved = $request->attachment->storeAs('public/purchase/attachments/', $att_file);
        
        $pa = new Purchase_Attachment();
        $pa->type = $request->type;
        $pa->purcahse_id = decrypt($request->purcahse);
        $pa->user_id = auth()->user()->id;
        $pa->role_id = $role_id;
        $pa->address = $att_file;
        $pa->save();
        return redirect(route('view_purchase_view', ['prid' => $request->purcahse]));
    

我无法通过在服务器端指定输入的名称来获取任何数据。 服务器端的数据通过返回 $request->getContent():

------WebKitFormBoundaryhtJyrJXT3BFCCQHF
Content-Disposition: form-data; name="type"

quotation
------WebKitFormBoundaryhtJyrJXT3BFCCQHF
Content-Disposition: form-data; name="purchase"

eyJpdiI6IktVUHh4ZmE1d3VGa3lhV0JZUDdtRkE9PSIsInZhbHVlIjoiRDQ3Zmt6N2VwODhpamN6VVpGUHhCdz09IiwibWFjIjoiNWE3ZTViOTgwOGQxNmI3MGU1ZTdmZTE3MDZmN2FhZTYxYTMzNzY1NjA3NzliMDQwNjJlY2QzNDg3OGVjMDk4ZSJ9
------WebKitFormBoundaryhtJyrJXT3BFCCQHF
Content-Disposition: form-data; name="_token"

YMTaQStR84KBEXuocHKoiDj6dqlpzdUju9MUAbtq
------WebKitFormBoundaryhtJyrJXT3BFCCQHF
Content-Disposition: form-data; name="attachment"; filename="safe_image.jpg"
Content-Type: image/jpeg

Some Binary Data Here, Stakoverflow denied uploading

【问题讨论】：

您是否尝试在表单中添加 enctype="multipart/form-data"？

是的，但它是一样的。

【参考方案1】：

您是否尝试过创建如下变量：

let x = new FormData();
x.append("name_file", data);

在ajax调用中

 
    ...
        data: x,
        processData: false,
        contentType: false,
         type: 'POST',

    ...
    

在后端，在你的控制器中：

public myFunction(Request $request)
 $file = $request->file("name_file");

在这篇文章中，您可以找到一个如何使用 JQuery 发送数据的示例：

How to send FormData objects with Ajax-requests in jQuery?

【讨论】：

是的，我也试过了，但仍然返回验证错误。

让 x = new FormData(); x.append('type', $("#pa-type").val()); x.append('purchase', $("#pa-purchase").val()); x.append('附件', $("#paf_input")[0].files[0]); $.ajax( url: "route('add_attachment_to_purchase')", data: x,//new FormData($("#purchase-attachment-form")[0]), type: 'post' ,

"message":"给定的数据无效。","errors":"type":["类型字段为必填项。"],"purchase":["购买字段为必填项。"],"附件":["附件字段为必填项。"]

contentType : false，很重要参见：***.com/questions/44354370/…

即使使用 contentType: false 也是一样的。