最近忙于项目,基本上没有时间写博客,抽空记录下使用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