无法将其转换为content-type：application / json

Question

let formData2 = new FormData();
                    formData2.append('_token', vm.response._token);
                    formData2.append('file', vm.response.content[i].path);
                    formData2.append('type', vm.response.content[i].type);

                        // this part is progress bar

                            var xhr = new XMLHttpRequest();
                            xhr.open("POST", "page/file/create/upload", true);
                            if (xhr.upload) {
                                xhr.upload.onprogress = function (e) {
                                    if (e.lengthComputable) {
                                        progressBar.max = e.total;
                                        progressBar.value = e.loaded;
                                        display.innerText = Math.floor((e.loaded / e.total) * 100) + '%';
                                    }
                                }
                                xhr.upload.onloadstart = function (e) {
                                    progressBar.value = 0;
                                    display.innerText = '0%';
                                }
                                xhr.upload.onloadend = function (e) {
                                    progressBar.value = e.loaded;
                                }
                            }
                            xhr.send(formData2);

i saw in network tab after pressing f12 that in response-header my content-type is text/html. i think this is the main reason of getting 500 error. because in ajax needs JSON. i am working with laravel and my controller get NULL. so how can i covert it into json?

Answer 1

let formData2 = new FormData();
                    formData2.append('file', vm.response.content[i].path);
                    // this part is progress bar

                    var xhr = new XMLHttpRequest();
                    xhr.open("POST", "page/file/create/upload", true);
                    xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
                    xhr.setRequestHeader('X-CSRF-TOKEN', vm.response._token);

                    if (xhr.upload) {
                        xhr.upload.onprogress = function (e) {
                            if (e.lengthComputable) {
                                progressBar.max = e.total;
                                progressBar.value = e.loaded;
                                display.innerText = Math.floor((e.loaded / e.total) * 100) + '%';
                            }
                        }
                        xhr.upload.onloadstart = function (e) {
                            progressBar.value = 0;
                            display.innerText = '0%';
                        }
                        xhr.upload.onloadend = function (e) {
                            progressBar.value = e.loaded;
                        }
                    }
                    xhr.send(formData2);

@ksoni still m getting 500 error code. and content-header is still text/html. what mistake i have done with my formData2(image or any file). what is the procedure. can u explain a bit.