current position:Home>Why does the front end still prompt cannot post, and the error reported by the back end still prompt null pointer?

Why does the front end still prompt cannot post, and the error reported by the back end still prompt null pointer?

2022-04-29 06:57:10CSDN Q & A

The phenomenon and background of the problem

I am a beginner , The code is stuck around , I just want to make a front and back interface for uploading pictures , My front-end form is submitted in the same way post,ajax Also set post 了 , Back end reception is also postmapping( Later, it was directly changed Requestmapping), Why can't the front-end data be transferred to the background ? The front end is directly stuck in cannot post 了 , I don't know what's wrong , Can anyone teach me ? thank !

Back end ( Paste only controller 了 ):

@Controller@ResponseBodypublic class FileController {@Autowired    private FileService fileService;@RequestMapping("/uploadFile")public String uploadFile(MultipartFile file,MultipartFile fileImage,String title){        try {            String result = fileService.uploadFile(file,fileImage,title);            return "index2";        } catch (Exception e) {            e.printStackTrace();            return " Failure ";        }    }}

Front-end :

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>test</title>    <!-- Bootstrap -->    <link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">    <style> html,body{ height: 100%; width: 100%; margin: 0 auto; } .titleClass{ margin-top:8px; color: white; font-weight: bolder; } .timeClass{ margin-top: 25px; margin-bottom: 10px; color: grey; font-size: 14px; } .contentTd{ padding-left: 10px; padding-right: 10px; width: 150px!important; height: 150px; } tr{ margin-top: 10px; margin-bottom: 60px; display: block; } .buttonP{ padding-top: 20px; } .imageTd{ width: 267px!important; height: 150px; } .imageTd img{ width: 100%; height: 100%; } </style></head><body><script src="[email protected]/dist/jquery.min.js"></script><script src="[email protected]/dist/css/bootstrap.min.css"></script>                <div class="modal-body">                    <form enctype="multipart/form-data" method="post" action="/uploadFile" name="uploadForm" id="uploadForm">                        <div class="form-group">                            <label for="exampleInputEmail1"> Document title </label>                            <input type="text" class="form-control" id="exampleInputEmail1" placeholder=" Document title " name="title">                        </div>                        <div class="form-group">                            <label for="exampleInputFile"> file </label>                            <input type="file" id="exampleInputFile" name="file">                            <p class="help-block"> Upload files </p>                        </div>                        <div class="form-group">                            <label for="exampleInputFile"> Document cover </label>                            <input type="file" id="fileImage" name="fileImage">                            <p class="help-block"> Upload file cover </p>                        </div>                        <div class="modal-footer">                            <button type="button" class="btn btn-default" data-dismiss="modal"> close </button>                            <button type="submit" id="filesubmit" class="btn btn-primary"> Submit </button>                        </div>                    </form>        <script> $("#filesubmit").click(function(){ var formData = new FormData(); formData.append("file",document.getElementById("exampleInputFile").file[0]); formData.append("fileIamge",document.getElementById("fileImage").file[0]); formData.append("title",document.getElementById("exampleInputEmail1")); $.ajax({ type:"POST", url: "/uploadFile", data: fromData, cache: false, processData: false, //  tell jQuery Do not process the data sent  contentType: false, //  tell jQuery Don't set Content-Type Request header  success: function (data) { }, error : function(XMLHttpRequest, textStatus, errorThrown) { } }); }); </script></body></html>
Operation results and error reporting contents

Front end error reporting is cannot post, The back end is java.lang.NullPointerException Null pointer

My solution ideas and tried methods

I didn't use it at first ajax transmission , Just use it js Forms , It can't be transmitted ; Now it's used ajax, Not yet. . Please give me some advice , Be deeply grateful !!

Take the answer :

Open the front console , Let's see what the request parameters look like

copyright notice
author[CSDN Q & A],Please bring the original link to reprint, thank you.

Random recommended