SSM 前端使用AJAX方式,fromdata文件格式上传二进制流文件

今天在上课的时候,遇到了一个比较坑的问题,有个学生拿来了她的代码,让我给她看看为什么传值传不过来。
首先,前端是这样的:

function upload(){
    var formData = new FormData();
    formData.append('images', $('#previewImg')[0].files[0]);
    var id1=$("input[name='id']").val()
    formData.append('id', id1);
    $.ajax({
        type:"post",
        processData: false,
        contentType: false,
        url:"uploadImage",
        data:formData,
        success:function(data){
        }
    });
}

后端是这样的:

@PostMapping("/uploadImage")
    public Map uploadImage(Integer id,MultipartFile images,HttpSession session){
//        System.out.println(id);
//        System.out.println(images);
        }
    }

然后上传文件的配置器是这样的:

<bean id="CommonsMultipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8"/>
<property name="maxUploadSize" value="1048675000"/>
<property name="maxUploadSizePerFile" value="1048675000"/>
</bean>

她遇到的第一个问题是,后端这里接受值的时候,接受到的id和文件都是null,然后再后续的使用中报空指针了。

看起来就是一个很简单的空指针问题,我拿来查的时候,先看了一下她这边的前段,开始我没有注意到是使用的fromdata,我以为是普通的json传输,而且在network中也很明显能看到请求头和带的参数。

后端可以报空指针,说明后端的代码也进去了,说明请求头也没问题。
所以我觉得问题原因可能出在请求头接受值的地方(事实证明,老中医的直觉是对的)
所以我把她的后端代码头做了修改。:

public Map uploadImage(HttpServletRequest request,HttpSession session){

用HttpServletRequest 来接受试试(这时候我还没注意到fromdata)然后发现,在req中也获取不到id,我有点麻了,我觉得可能是写法问题,导致这个数据不在req里面,我再换个写法:

    public Map uploadImage(@RequestParam Integer id,@RequestParam MultipartFile images,HttpSession session){

可能是我对HttpServletRequest 忘记的多,找不到值在哪儿,我直接用注解去取值看看,结果发现还是null。我当时就无语了,这他妈的。

然后我就又回头去看前段,既然这里折腾半天没效果,不如换个阵地。之前前端传后端没见过二进制的文件流啊,是不是因为这玩意的原因?我去前段把她这里set文件的地方给她注掉了,我心想,这不就变成了一个普通的ajax了么,这不应该有问题吧。

然后我就去后端看,上面的三板斧又转了一圈,还不行。我真是见了鬼了。
然后学生和我说,老师是不是fromdata的问题。
我一看,这里怎么还不一样呢,我以为这里就是个普通的json。
完了又看了俩眼这个fromdata的用法,很简单啊,前段传值,后端接收,没毛病啊。这还有什么问题不成?
搜了一下fromdata使用的时候注意事项,有文章说要加个注解@MultipartConfig,但是我试过了,发现还是null,这怎么可能啊!我要颜面扫地了。
这个时候这个问题已经看了接近2个小时了,这个时候学生吐槽说,一般这种一看看一天的问题,八成是什么小问题,不知道哪儿写错了。
我也同意这种想法,于是,我的目光又回到了后端的接受请求的地方:

public Map uploadImage(Integer id,MultipartFile images,HttpSession session){

她这里前端fromdata设置值的时候,先塞的file,后塞的id,会不会是这里接受参数的顺序有影响?
然后我把这句改了一下:

  public Map uploadImage(MultipartFile images,Integer id,HttpSession session){

对,没错,我调换了俩个参数的位置试了一下(死马当活马医了)
然后,然后,然后这个问题就解决了,他的报错终于跳到下一步了!!!!

调换了参数位置以后,出现了新的报错,说她没有配置文件解析器,但是她这里是有配置MultipartFilte上传文件解析器的,然后这个问题比较简单,看了一下,解析器的id不对。应该是:

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8"/>
<property name="maxUploadSize" value="1048675000"/>
<property name="maxUploadSizePerFile" value="1048675000"/>
</bean>

一下午这就过去了,看了一个问题看了快2个半小时,所以必须写个文章记录一下。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,在前端页面上添加文件上传的表单,代码如下: ```html <form id="uploadForm" enctype="multipart/form-data"> <input type="file" name="file"/> <input type="button" value="上传" onclick="uploadFile()"/> </form> ``` 然后,在JavaScript代码中编写上传文件的函数,使用Ajax方式上传文件。代码如下: ```javascript function uploadFile() { var formData = new FormData($("#uploadForm")[0]); $.ajax({ url: "uploadFile", type: "POST", data: formData, contentType: false, processData: false, success: function (data) { alert("上传成功!"); }, error: function (xhr) { alert("上传失败!"); } }); } ``` 接着,在Spring MVC的Controller中添加文件上传的处理方法,代码如下: ```java @RequestMapping(value = "/uploadFile", method = RequestMethod.POST) @ResponseBody public String uploadFile(HttpServletRequest request) throws IOException { MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; MultipartFile file = multipartRequest.getFile("file"); String fileName = file.getOriginalFilename(); String filePath = request.getSession().getServletContext().getRealPath("/") + "upload/"; File dest = new File(filePath + fileName); if (!dest.getParentFile().exists()) { dest.getParentFile().mkdirs(); } file.transferTo(dest); return "success"; } ``` 最后,需要在Spring MVC的配置文件中添加以下配置,以支持文件上传: ```xml <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="UTF-8"/> <property name="maxUploadSize" value="104857600"/> <property name="maxInMemorySize" value="4096"/> </bean> ``` 其中,maxUploadSize表示上传文件的最大大小,单位为字节。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值