从 Cordova 应用程序将文件流式传输到服务器

Question

我有 cordova 应用程序，用户必须能够从手机中选择图像并将其上传到 AWS S3。我为此使用cordova-plugin-camera 和S3 SDK。我的代码可以正常工作（见下文），但需要将整个图像拉入内存中的 base64 编码字符串（每个Camera.DestinationType.DATA_URL），然后再拉入Buffer。

我希望将其从手机的硬盘中流式传输，以缓解潜在的内存问题。 cordova-plugin-camera 网站甚至对此有警告：

/** * 警告：不推荐使用 DATA_URL！ DATA_URL 目的地 * 类型非常占用内存，即使质量很低 环境。使用它 * 会导致内存不足错误和 应用程序崩溃。请改用 FILE_URI * 或 NATIVE_URI。 */

那么有没有办法使用FILE_URI 或NATIVE_URI 或任何其他技术将照片直接从磁盘传输到S3？

这是我当前的代码：

doTheThing() {
    let options = {
        quality: 50,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        encodingType: Camera.EncodingType.JPG
    };

    navigator.camera.getPicture(imgData => {
       this.uploadToS3(imgData);
    }, options);


    uploadToS3(data) {
        let AWS = require('aws-sdk');

        AWS.config = new AWS.Config();
        AWS.config.accessKeyId = 'noway';
        AWS.config.secretAccessKey = 'jose';
        AWS.config.region = 'us-east-2';

        let s3 = new AWS.S3();
        let uploadParams = { Bucket: 'iamkule/f1/f2', Key: '', Body: new Buffer(data, 'base64') };
        uploadParams.Key = 'myfile.jpg';

        s3.upload(uploadParams, function (err, data) {
           if (data) {
              console.log('yay!');
           }
        });
    }
}

Answer 1

这应该可以帮助您入门。请原谅我的伪代码。随时根据需要对其进行编辑。

设备将图像保存到磁盘：

function takePicture(urlCallback){
    let options = {
        quality: 50,
        destinationType: Camera.DestinationType.FILE_URI,// <--
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        encodingType: Camera.EncodingType.JPG
    };
    navigator.camera.getPicture(urlCallback, onFail, options);  
    function onFail(message) {
        alert('Failed because: ' + message);
    }
}

从磁盘获取图像作为 blob：

function getImageAsBlob(url, blobCallback) {
    var xhr = new XMLHttpRequest();
    xhr.open( "GET", url, true );
    xhr.responseType = "arraybuffer";
    xhr.onload = function( ev ) {
        // Obtain a blob: URL for the image data.
        var arrayBufferView = new Uint8Array( this.response );
        var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
        blobCallback(blob);
    };
    xhr.send();
}

将 blob 上传到 S3：

function uploadToS3(blob, callback) {
    let AWS = require('aws-sdk');
    AWS.config = new AWS.Config();
    AWS.config.accessKeyId = 'noway';
    AWS.config.secretAccessKey = 'jose';
    AWS.config.region = 'us-east-2';
    let s3 = new AWS.S3();
    let options = { Bucket: 'iamkule/f1/f2', Key: 'myfile.jpg', Body: blob };// <--
    s3.upload(options, callback);
}

把它们放在一起：

takePicture(function(url){
    getImageAsBlob(url, function(blob){
        uploadToS3(blob, function (err, data) {
            if (data) console.log('yay!');
        });
    });
});

S3 信息来自 here。照片拍摄信息来自here。 快乐编码！