ionic+ngCordova+formData拍照上传多文件

最近在用ionic开发项目,和原生交互用的ngcordova,项目需要用到拍照上传文件,一次性上传多张,不废话,上代码。
首先得调用摄像头进行拍照,代码如下

//使用拍照功能需要添加cordova plugin add cordova-plugin-camera插件(想要用其他功能可以自行搜索添加,官网是http://ngcordova.com/)
 $cordovaCamera.getPicture(cameraOptions).then(function (imageData) {
            //这里定义了一个变量来接收照相返回的数据,下文会用到
            //返回示例格式:file:///storage/xx/cache/1474523098860.jpg
            $scope.imgData =  imageData;
     }, function (err) {
       // error
     });

然后进行图片上传,下面讲如何将照相返回的文件进行上传,这里讲两种方式,第一种,也就是官方提供的方式,代码如下:

        var url = $scope.path + '/api/xx/saveTracingDetails';
        var options = new FileUploadOptions();
        options.fileKey = 'files';
        var params = {};
        params.facilityIdentify = '217ae60e5bc746f';
        params.nodeName = nodeName;
        options.params = params;

        $cordovaFileTransfer.upload(encodeURI(url), $scope.imgData, options)
          .then(function (result) {
            console.log(JSON.stringify(result.response));
            console.log("success");
          }, function (err) {
            console.log(JSON.stringify(err));
            console.log("fail");
          }, function (progress) {
            // constant progress updates
          });

按照这种方式可以将图片文件上传到后台,这里是图片和自己定义的参数一起上传,需要注意的是,如果图片为空的话,附带的params参数也会上传失败,后台接收不到,至于原因的话,由于时间关系,这里没作深究。用官网的这种方式只能上传单张图片,如果想要上传多张的话,需要循环调用上传方法,就分作多次请求了,不是我想要的,于是就有下面第二种方式。
第二种方式,用h5的formData模拟表单上传图片以及参数,代码如下:

        var formData = new FormData();
        window.resolveLocalFileSystemURL($scope.imgData, function(fileEntry) {
          fileEntry.file(function(file) {
            var reader = new FileReader();
            reader.onloadend = function(e) {
               /*******华丽丽的分割线**********/
               //需要将图片路径转换为二进制流,并且指定类型为图像格式(还有其他格式,如文本格式等等)
               //这里用了两个files,代表上传两张图片
              var the_file = new Blob([e.target.result ], { type: "image/jpeg" } );
              formData.append("files", the_file,"images.jpg");
              formData.append("files", the_file,"images.jpg");
              /*******华丽丽的分割线**********/
              //以下是表单参数
              formData.append("tenantId", 1);
              formData.append("facilityIdentify", "217ae60e5bc746f");
              formData.append("nodeName", nodeName);
              $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (responseStr) {
                  //$scope.savedImgs.push(responseStr);
                },
                error: function (responseStr) {
                }
              });
              //post form call here
            };
            reader.readAsArrayBuffer(file);

          }, function(e){$scope.errorHandler(e)});
        }, function(e){$scope.errorHandler(e)});

这里需要用到文件系统,将图片路径转换为二进制流,利用formData进行上传。
后台用的springmvc,代码片段如下:

    @RequestMapping(value = "/saveTracingDetails", method = RequestMethod.POST)
    public Message saveTracingDetais(CtTracingDetailDTO ctTracingDetailDTO, String tenantId, @RequestParam("files") MultipartFile[] files) {
        //do something
        return MessageUtil.message(Constants.CT_TRACING_COLLECT_CODE);
    }

整个上传过程就是这样,有不懂的欢迎交流,有不对的地方欢迎指出。

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试