用ajax上传jquery文件[重复]

Question

This question already has an answer here:

                </div>
            </div>
                    <div class="grid--cell mb0 mt4">
                        <a href="/questions/6211145/upload-file-with-ajax-xmlhttprequest" dir="ltr">Upload File With Ajax XmlHttpRequest</a>
                            <span class="question-originals-answer-count">
                                (1 answer)
                            </span>
                    </div>
            <div class="grid--cell mb0 mt8">Closed <span title="2018-06-28 23:14:33Z" class="relativetime">2 years ago</span>.</div>
        </div>
    </aside>

            <div class="form-group">
                <label class="form-control-label">
                    {{ __('Not Dosyası') }} : <span class="m--font-danger">*</span>
                </label>
                <br />
                <button type="button" onclick="$('#new--file').trigger('click');" class="btn m-btn m-btn--gradient-from-primary m-btn--gradient-to-info">{{ __('Not Dosyasını Yükle') }}</button>
            </div>
            <form id="new--form_file" enctype="multipart/form-data">
                <input class="m--hide" type="file" name="file" id="new--file" />
            </form><!-- group image form -->

jquery:

$(function() {
    $("#new--file").on('change', (function(e) {
        LessonNote.new.readURL(this);
    }));
});

readURL method:

    readURL: function(input) {
        var file = input.files[0];
        var fileType = file.type;
        var fileSize = file.size;
        var match = ["application/pdf"];
        var maxSize = 20971520; // 20MB

        if (fileSize > maxSize) {
            swal(LANGCONVERT.error + '!', LANGCONVERT.file_maximum_size_20, "error");
        } else if (!((fileType === match[0]))) {
            swal(LANGCONVERT.error + '!', LANGCONVERT.file_supported_types_pdf, "error");
        } else {
            $.ajax({
                url: api.main + api.file_upload,
                type: 'post',
                data: file,
                success:function(data){
                    console.log(data);
                },
                cache: false,
                contentType: false,
                processData: false
            });
        }
    }

Laravel side:

public function store(Request $request) {
    $rules = [
        'file' => 'required|max:10000|mimes:pdf,jp2,jpeg,jpg,png,bmp,tiff,tif,mirax'
    ];

    $this->validate($request, $rules);

    $data = $request->all();
    $data["file"] = $request->file->store('');

    return $this->showMessage($data, 201);
}

Return error:

http://localhost:8181/api/file_upload 422 (Unprocessable Entity)

It means file field is required.

I try to with POSTMAN, it works great. How can i send file with name as a file ?

</div>

Answer 1

You are doing it wrong here

var file = input.files[0];
...
$.ajax({
    ...
    data: file,
    ...
...

Instead, you need to send using FormData()

var file = input.files[0];
var formData = new FormData();
formData.append("file", file);

...
// and in $.ajax({
$.ajax({
    ...
     data: formData,
    ...
...

Hope, this is clear, you can look out other basic example here - Ajax Upload image

I have snipped your other code with ... to point your mistake on a exact code.