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

Question

我正在尝试通过 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

Answer 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?