weixin_41017974
CrownCowcow
采纳率16.7%
2020-04-09 16:18

求教:使用FormData存放表单数据,Controller该如何接收参数

首先这是我的表单:

<form method="post" id="addproductform" enctype="multipart/form-data">
    <h1>添加商品</h1>
    商品名称:<input type="text" id="goodsname"/>
    <br/>
    商品图片:<input type="file" id="goodsphoto"/>
    <br/>
    <br/><br/>
    商品类别<br/>
    一级类别:
    <select id="catalogue_select1">
    </select>
    二级类别:
    <select id="catalogue_select2">
    </select>
    三级类别:
    <select id="catalogue_select3">
        <option>三级电器</option>
        <option>三级女装</option>
        <option>三级男装</option>
    </select>
    <br/><br/>
    ·商品规格设置<br/><br/>
    <div id="goodsItemDiv">
        <span class="attribute">内存</span>:
        <span class='unchecked' name='1' checked='false' onclick='change(this);'>4G</span>
        <span class='unchecked' name='1' checked='false' onclick='change(this);'>8G</span>
        <span class='unchecked' name='1' checked='false' onclick='change(this);'>16G</span>
        <span class='unchecked' name='1' checked='false' onclick='change(this);'>32G</span>
        <span class='unchecked' name='1' checked='false' onclick='change(this);'>64G</span>
    </div>
    <br/>
    <br/>
    <div>
        <span class="attribute">颜色</span>:
        <span class='unchecked' name='2' checked='false' onclick='change(this);'>黑色</span>
        <span class='unchecked' name='2' checked='false' onclick='change(this);'>银色</span>
        <span class='unchecked' name='2' checked='false' onclick='change(this);'>深空灰</span>
    </div>
    <br/>
    <span class="attribute">商品价格</span>:<input type="text" id="goodsprice"/><br/><br/>
    <span class="attribute">商品库存</span>:<input type="text" id="goodsstock"/>
    <div>
        <br/>
        <b>提示:</b><span id='resultSpan'></span>
        <br/>
        <input type="button" id="additem" onclick='addItem()' value="添加商品规格"/><br/>
        <input type="button" onclick='addThisProduct()' value="添加商品"/>
    </div>
</form>

主要就是里面有个文件上传:

<input type="file" id="goodsphoto"/>

现在我希望将表单中的图片以及其它文本信息都传递到后台中,但是!我的表单中的文本信息比如商品名称等等,**我并不打算直接提交至后台中,而是在JavaScript中把填写的数据处理好后再写入到FormData中,之后会通过Ajax发送FormData给Controller**,所以我并没有直接写:

form.append("product",$("#addproductform")[0]);

我是这么向FormData填充数据的:

var form = new FormData();
<!-- 这里我想获得表单中,文件上传的部分T^T我实在不知道怎么搞才这么写的 -->
form.append("productPhoto",$("#addproductform input")[1]);
<!-- productName、catalogueI、catalogueII这些都是我处理好后的数据-->
form.append("productName", productName);
form.append("catalogueI", catalogueI);
form.append("catalogueII", catalogueII);
form.append("catalogueIII", catalogueIII);

接着,我在Controller中,是这么接收的:

@ResponseBody
@RequestMapping("/addproduct")
public int addProduct(HttpServletRequest request,@RequestParam("productPhoto") MultipartFile productPhoto) throws IOException {
    String productName = request.getParameter("productName");
    String catalogueI = request.getParameter("catalogueI");
    String catalogueII = request.getParameter("catalogueII");
    String catalogueIII = request.getParameter("catalogueIII");
    String originalFilePath = productPhoto.getOriginalFilename();
    System.out.println("productName is: "+productName);
    System.out.println("catalogueI is: "+catalogueI);
    System.out.println("catalogueII is: "+catalogueII);
    System.out.println("catalogueIII is: "+catalogueIII);
    System.out.println("originalFilePath is: "+file.getOriginalFilename());
    return 1;
}

但是就报错了:
Resolved [org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'productPhoto' is not present]

说是我的productPhoto字段不存在?为啥会这样啊?

总的来说,我的问题就是:

请问各位大神们,我到底应该怎么写呢?主要就是我并不是把表单的所有填写的数据都直接提交的,而是经过JavaScript处理后,连并表单中的图片一起提交,此时我的前端、后端该怎么写?我写的都有哪里的错误呢?

真心请求帮助/(ㄒoㄒ)/~~而且真的很抱歉,我的C币没了,我问题太多了

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • u013829202 觅夜的黑 1年前

    request.getParameter 获取的是元素为name的值,不是id。

    点赞 评论 复制链接分享
  • dinglin5555 Oximimasu 1年前

    input 标签 增加name属性为 productPhoto

    <input type ="file" name = "productPhoto" id ="goodsphoto" />
    

    我可能搞错了..

    一般我个人在发上传文件的请求 用的是ajaxFileUpload

    点赞 评论 复制链接分享

为你推荐