前言:项目需求中涉及到多图片上传的注册功能,项目中前端使用的是比较老的ionic1+angularJS,后端SpringMVC,开发途中的遇到的各种爬坑血泪史,在此分享出来给大家参考。
1.组建表单
因涉及到多图片上传以及加载本地图片,故采用H5的FormData表单对象
这里先粘出部分HTML代码作为示例,以下表单上传到后台的数据有两个文本以及三张图片
<ion-view ng-controller="regController as vm" title="用户注册"> <ion-content class="content-bg-color" has-supheader="false" overflow-scroll="true"> <form enctype="multipart/form-data" method="post" novalidate ng-submit="vm.save(userForm)" name='userForm' id='userForm'> <label class="item item-input item-stacked-label"> <span class="input-label">账号:</span> <input type="text" required placeholder="建议使用手机号" ng-model="vm.user.account" name='account'> </label> <label class="item item-input item-stacked-label"> <span class="input-label">密码:</span> <input type="password" required ng-pattern="^[a-zA-Z]\w{5,17}$" ng-maxlength="18" ng-minlength="6" ng-model="vm.user.password" name='password' placeholder="以字母开头,长度在6~18之间,只能包含字母、数字和下划线"> </label>
<label class="item item-input item-stacked-label"> <span class="input-label">姓名:</span> <input type="text" required ng-maxlength="6" ng-model="vm.user.name" placeholder="长度不得超过6个字"