最近忙于项目，基本上没有时间写博客，抽空记录下使用Cordova实现图片选取上传的过程。

整个过程基于第三方插件，cordova-plugin-ImagePicker实现的图片上传。

Github地址：https://github.com/giantss/cordova-plugin-ImagePicker

上面有详细的流程：
还是将常用的命令记录一下：

//添加安卓平台
cordova platform add android

//显示插件列表
cordova plugin list

//添加相机
cordova plugin add cordova-plugin-camera

//添加文件读取
cordova plugin add cordova-plugin-file

//添加文件传输
cordova plugin add cordova-plugin-file-transfer

//========================当然，通常我们还会用到以下几个：

//硬件消息提醒
cordova plugin add cordova-plugin-vibration
//开启调试
cordova plugin add cordova-plugin-device


//以及删除命令
//首先不建议重新问题频繁删平台来解决，原因在于删掉平台可能会导致配置文件改变，从而需要再次安装相关的插件，很麻烦。
//我一般构建不成是删除构建的APP，只取前端文件夹和核心配置文件重新配置。

//删除插件
cordova plugin rm cordova-plugin-camera
cordova plugin rm ……

下面是主要的代码：

一 . 使用cordova-plugin-ImagePicker

//调用代码
 cameraTakePicture();

//主要方法
function cameraTakePicture() {
    ImagePicker.getPictures(function (result) {
        alert(result);
    }, function (err) {
        alert(err);
    }, {
        maximumImagesCount: 4,
        width: 1920,
        height: 1440,
        quality: 100
    });
}


//maximumImagesCount:最大上传
//存在BUG:选择一半后再选又是4个，这里可以选择传个变量参数进去，外面计算数量

获取的数据是一个JSON，里面包含图片在手机中的路径，后面自己灵活使用。
推荐将路径放在一个array里面即可，上传的时候逐条取出。

二 . 上传至后端

//完整代码：
function uploadFile(fileurl, name) {
    let options = new FileUploadOptions();
    options.fileKey = "file";
    //获取后缀，用于生成图片时用
    let point = fileurl.lastIndexOf(".");
    let type = fileurl.substr(point);
    options.fileName = name;
    options.mimeType = "text/plain";
    let headers = {'headerParam': 'headerValue'};
    options.headers = headers;
    //上传附带参数
    var params = {};
    params.type = type;
    //设置参数，后台获取
    options.params = params;
//options.httpMethod = "POST";
//设置提交方式，可以修改，修改方式如上
    let ft = new FileTransfer();
    ft.upload(fileurl, encodeURI("服务器路径（1）"), onSuccess, onError, options);
    function onSuccess(r) {
        console.log("Code = " + r.responseCode);
        console.log("Response = " + r.response);
        console.log("Sent = " + r.bytesSent);
        uploadhelp(r.response, type);
    }

    function onError(error) {
        alert("An error has occurred: Code = " + error.code);
        console.log("upload error source " + error.source);
        console.log("upload error target " + error.target);
    }

}


//（1）：路径呗。。。springMVC的RequestMapping,webService的Path
//根据框架的不同灵活变换

//onSuccess中会有状态码，文件名，和responde

此处无法批量上传，是逐个上传，上传失败重新上传覆盖即可。

服务端接收代码：

依赖：对于SpringMVC具体的导入就不详细说了，没有搭建
//此依赖用于文件传输，当然还有些依赖。。。

//版本号根据自己的加
 <dependency>
    <groupId>org.glassfish.jersey.media</groupId>
    <artifactId>jersey-media-multipart</artifactId>
    <version>${jersey.version}</version>
    <scope>provided</scope>
</dependency>


//可能有用
<dependency>
     <groupId>org.glassfish.jersey.core</groupId>
     <artifactId>jersey-server</artifactId>
</dependency>
<dependency>
     <groupId>org.glassfish.jersey.media</groupId>
     <artifactId>jersey-media-json-jackson</artifactId>
</dependency>

生产环境可能还需要配置允许使用等，可能被限制MultiPartFeature！！

@POST
@Path("/uploadimg")
@Consumes(MediaType.MULTIPART_FORM_DATA)
public Response uploadFile(
    @FormDataParam("type") String type,
    @FormDataParam("file") InputStream uploadedInputStream,
    @FormDataParam("file") FormDataContentDisposition fileDetail) {
    //fileDetail:对应前台的 options.params = params;
    // save it
    //生成文件名，前台取了后缀，这里直接用
    String uploadedFileLocation = "d://uploaded//" + fileDetail.getFileName() + type;
    writeToFile(uploadedInputStream, uploadedFileLocation);
    //使用的FastJSON对象生成参数
    JSONObject node = new JSONObject();
    node.put("message", "File uploaded to : " + uploadedFileLocation);
    //返回给前台的，分别是：status-status
    //entity()-send
    //response:整体
    return Response.status(200).entity(node.toJSONString()).build();
}

//写入服务器
private void writeToFile(InputStream uploadedInputStream,String uploadedFileLocation) {
  try {
     OutputStream out = new FileOutputStream(new File(uploadedFileLocation));
     int read = 0;
     byte[] bytes = new byte[4096];
     while ((read = uploadedInputStream.read(bytes)) != -1) {
          out.write(bytes, 0, read);
     }
    out.flush();
    out.close();
    } catch (IOException e) {
       log.error("upload-file save to local fail: ", e);
    }
}

三 .总结

整个完整的流程就是这样的，因为删了一些不用的，所以可能运行起来会报错，但是改起来应该没什么问题。

参考：
https://github.com/giantss/cordova-plugin-ImagePicker
http://www.hangge.com/blog/cache/detail_1158.html

四，异常

记录搭建的时候出现的异常：

1，统一版本问题

error: resource android:attr/dialogCornerRadius not found
error: resource android:attr/fontVariationSettings not found
error: resource android:attr/ttcIndex not found


plugin add cordova-android-support-gradle-release  --variable ANDROID_SUPPORT_VERSION=27.0

2。异步问题

如果出现node.js的async类似报错，可能需要

添加 ： 添加 async 
npm install async --save

Cordova ：安卓端拍照且上传图片记录