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

谁借莪１个温暖的怀抱￠ 2022-05-22 12:27 304阅读 0赞

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

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

Github地址：[https://github.com/giantss/cordova-plugin-ImagePicker][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][https_github.com_giantss_cordova-plugin-ImagePicker]  
[http://www.hangge.com/blog/cache/detail\_1158.html][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

[https_github.com_giantss_cordova-plugin-ImagePicker]: https://github.com/giantss/cordova-plugin-ImagePicker
[http_www.hangge.com_blog_cache_detail_1158.html]: http://www.hangge.com/blog/cache/detail_1158.html