liu_yuanji 2022-04-22 14:20 采纳率: 20%
浏览 1106
已结题

为什么前端还是提示cannot post,后端报的错还是提示空指针?

问题遇到的现象和发生背景

本人是初学者,代码是粘来粘去弄的,只是想做一个上传图片的前后端界面,我前端的表单用的提交方式也是post,ajax也设置post了,后端接收也是postmapping(后来直接改的Requestmapping),为什么前端的数据还是传不到后台?前端直接卡在cannot post了,我不知道哪里还出了问题,谁能教教我吗?感谢!

问题相关代码,请勿粘贴截图

后端的(只粘贴controller了):

@Controller
@ResponseBody
public 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 "失败";
        }
    }
}

前端的:


<!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="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/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="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/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">文件标题</label>
                            <input type="text" class="form-control" id="exampleInputEmail1" placeholder="文件标题" name="title">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputFile">文件</label>
                            <input type="file" id="exampleInputFile" name="file">
                            <p class="help-block">上传文件</p>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputFile">文件封面</label>
                            <input type="file" id="fileImage" name="fileImage">
                            <p class="help-block">上传文件封面</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" id="filesubmit"  class="btn btn-primary">提交</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, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    success: function (data) {
                    },
                    error : function(XMLHttpRequest, textStatus, errorThrown) {
                    }
                    });
            });
        </script>
</body>
</html>

运行结果及报错内容

前端报错就是cannot post,后端就是java.lang.NullPointerException空指针

我的解答思路和尝试过的方法

一开始我都不是用的ajax传输,就用的js表单,传不上去;现在用了ajax,还是不行。请各位指点我一下吧,感激不尽!!

  • 写回答

3条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-04-22 16:04
    关注

    应该是由于按钮类型的submit,直接提交到form标签设置的action地址,可以将type="submit"改为type="button"

    <button type="button" id="filesubmit"  class="btn btn-primary">提交</button>
    

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 9月13日
  • 已采纳回答 9月13日
  • 创建了问题 4月22日

悬赏问题

  • ¥15 逻辑谓词和消解原理的运用
  • ¥15 请求分析基于spring boot+vue的前后端分离的项目
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js,页面2返回页面1时定位进入的设备
  • ¥200 关于#c++#的问题,请各位专家解答!网站的邀请码
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗?