ionic 多图片上传方案

简单点直接上代码，没有什么技术难度 采用H5的formdata的特性来实现多图片上传的任务。

前端

js代码

从相册获取照片需要用到的插件

cordova-plugin-imagepicker

js代码

//从相册获取照片$scope.getPhotoFromAlbum = function () {    plugins.imagePicker.getPictures(        function(results) {//results 为获取的照片地址            for (var i = 0; i < results.length; i++) {                console.log('Image URI: ' + results[i]);                readerFile(results[i]);// $scope.$apply 是为了获取成功以后刷新界面的显示。                $scope.$apply(function(){                    $scope.imageData.push(results[i]);                })            }        }, function (error) {            console.log('Error: ' + error);        }, {            maximumImagesCount: 10,            width: 800        }    );}

从拍照获取照片需要用到的插件

cordova-plugin-camera

$scope.getPhotoFromCamera = function () {    var options = {        quality: 40,        destinationType: Camera.DestinationType.FILE_URI,        encodingType: Camera.EncodingType.JPEG,        saveToPhotoAlbum: false    };    var win = function (imageData) {        console.log("照片插件成功信息：" + imageData);        readerFile(imageData);        $scope.$apply(function(){            $scope.imageData.push(imageData);        })    }    var fail = function (message) {        console.log("照片插件失败信息：" + message);    }    navigator.camera.getPicture(win, fail, options);}

获取照片后需要将照片转成二进制流

需要用到的插件cordova-plugin-file-transfer

function readerFile(imageURI) {    window.resolveLocalFileSystemURL(imageURI, function(fileEntry) {        fileEntry.file(function(file) {            var reader = new FileReader();            reader.onloadend = function(e) {                var the_file = new Blob([e.target.result ], { type: "image/jpeg" } );                //存储图片二进制流                $scope.ImageFileList.push(the_file);                //存储图片地址用于预览                $scope.ImageURIList.push(imageURI);            };            reader.readAsArrayBuffer(file);        }, function(e){$scope.errorHandler(e)});    }, function(e){$scope.errorHandler(e)});}

上传照片的代码

$scope.submitSave = function(){    $ionicLoading.show();    var formData = new FormData();    for(var i=0; i < $scope.ImageFileList.length; i++){        formData.append("files", $scope.ImageFileList[i],"images.jpg");    }    //以下是表单参数    formData.append("key", value);。。。  //需要用POST请求    $http.post(上传的地址, formData, {        headers: {"Content-Type": undefined },        transformRequest: angular.identity    }).success(function (data) {        $ionicLoading.show({            template: '上传成功'        });        $timeout(function () {            $ionicLoading.hide();            $ionicHistory.goBack(-1);        },2000);    }).error(function (error) {        $ionicLoading.show({            template: '上传失败'        });        $timeout(function () {            $ionicLoading.hide();        },2000);    })}

后台代码

采用ssm框架

在框架中的配置文件上传可以参考

http://blog.csdn.net/evankaka/article/details/45826697/

根据自己的业务需求来实现，值得注意的地方，①必须是POST请求即必须加上 method = RequestMethod.POST，②不能用HttpServletRequest 去强转成MultipartHttpServletRequest去获取MultipartFile类，必须用MultipartFile类去接收，即@RequestParam("files") MultipartFile[] files去接收。

 @RequestMapping(value = "/updata", method = RequestMethod.POST)    @ResponseBody    public PageData jcxxSb(HttpServletRequest request,                    HttpServletResponse response, String type, String str1,                    String str2, String str3,                    @RequestParam("files") MultipartFile[] files)                    throws Exception {        response.setHeader("Access-Control-Allow-Origin", "*");        // 获取源文件存储路径        String filePath = request.getSession().getServletContext()                        .getRealPath("uploadFiles");        final SimpleDateFormat format = new SimpleDateFormat("yyyyMMdd");        filePath = filePath + "\\" + format.format(new Date());        PageData pd = new PageData();        pd.put("str1", str1);        String filepathStr = "";        if (files != null && files.length > 0) {            for (int i = 0; i < files.length; i++) {                final MultipartFile file = files[i];                if (file.getSize() > 0) {                    final String realFileName = file.getOriginalFilename();                    final String fileType = realFileName.substring(                                    realFileName.lastIndexOf("."),                                    realFileName.length());                    final String fileName = get32UUID();                    filepathStr += filePath + "\\" + fileName + fileType + ",";                    FileUpload.fileUp(file, filePath, fileName);                }            }        }        pd.put("IMG_PATH", filepathStr);        return null;    }

这样就可以完成业务要求了。