移动端拍照相册选择上传-Cordova

1,858 阅读1分钟
从相册中选择图片上传、拍照上传需要下面三个控件。如果没有需要安装下:
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-file-transfer

FileTransfer API文档

Camera API文档

拍照并上传

// 上传服务地址
var serverUrl = "https://www.baidu.com/upload.php";

// 上传成功
var success = function(res){
    console.log("上传成功!")
}

// 上传失败
var fail = function(rej){
    console.log("上传失败!")
}

// 拍照
navigator.camera.getPicture(function (fileUrl) {
  uploadPic(serverUrl,fileEntry.fullPath,success,fail);
}, function (val) {
  // alert("拍照失败,请联系管理员!");
},{
  quality: 50,
  destinationType: navigator.camera.PictureSourceType.FILE_URI
});

// 上传方法
function uploadPic(url,fileURL,success,fail){
    var options = new FileUploadOptions();
    options.fileKey = "file";
    options.httpMethod = "POST";
    options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
    options.mimeType = "image/jpeg";
    options.chunkedMode = false;
    var ft = new FileTransfer();
    ft.upload(fileURL, encodeURI(url) , function(res){
      success(res)
    }, function(rej){
      console.log('上传失败');
      fail(rej)
    }, options,true);
  }

选取照片并上传

// 上传服务地址
var serverUrl = "https://www.baidu.com/upload.php";

// 上传成功
var success = function(res){
    console.log("上传成功!")
}

// 上传失败
var fail = function(rej){
    console.log("上传失败!")
}

// 拍照
navigator.camera.getPicture(function (fileUrl) {
  uploadPic(url,fileUrl,success,fail);
}, function (val) {
  // alert("照片获取失败,请联系管理员!");
},{
  quality: 50,
  destinationType: navigator.camera.DestinationType.FILE_URI,
  sourceType: navigator.camera.PictureSourceType.SAVEDPHOTOALBUM
});

// 上传方法
function uploadPic(url,fileURL,success,fail){
    var options = new FileUploadOptions();
    options.fileKey = "file";
    options.httpMethod = "POST";
    options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
    options.mimeType = "image/jpeg";
    options.chunkedMode = false;
    var ft = new FileTransfer();
    ft.upload(fileURL, encodeURI(url) , function(res){
      success(res)
    }, function(rej){
      console.log('上传失败');
      fail(rej)
    }, options,true);
  }

Andoid 拍照获取路径问题

通常情况下获取的路径是 file://storage/text/text.txt,但是, 在Android版本> = 4.4中引入了MediaStore。媒体提供程序包含内部和外部存储设备上所有可用媒体的元数据, 并返回 content://URI。需要用下面方法转化成真是的 file:// 路径。

cordova-plugin-filepath 转化方法

/*
* fileUrl 需要转化的路径
*/
window.FilePath.resolveNativePath(fileUrl, function(fileEntry){
    console.log("路径转化成功!")
    console.log(fileEntry.fullPath)
}, function(err){
    alert("路径转化失败,请联系管理员!");
});

cordova-plugin-resolveLocalFileSystemURI 转化方法

/*
* fileUrl 需要转化的路径
*/
window.resolveLocalFileSystemURI(fileUrl, function(fileEntry){
    console.log("路径转化成功!")
    console.log(fileEntry.fullPath)
}, function(err){
    alert("路径转化失败,请联系管理员!");
});