时间戳

首页 > 解决方案 > Nativescript ImageSource HTTP Post

http - Nativescript ImageSource HTTP Post

问题描述

我正在尝试上传从 Nativescript Camera Plus 插件（ImageSource 类型）拍摄的图像，并使用 Nativescript HTTP Form Data 插件将其上传到我的 API 服务器。我已经使用 Postman 测试了我的后端（Django），它可以工作。我无法弄清楚如何从 ImageSource 获取包含该图像的实际 PNG/JPG 文件，以便单独上传（而不是 ImageSource 数据）。

我曾尝试使用 ImageSource 对象本身，但这会发送一个空文件。然后我尝试按照 HTTPFormData 插件的演示，并使用 UIImageRepresentation 和位图的东西（ios/Android），但它仍然提交一个空文件。

let fd = new TNSHttpFormData();

    let params = [];

    let imageData: any;
        if(this.scannedID.image_data) {
            if(this.scannedID.image_data.ios) {
                console.log("iOS" + this.scannedID.image_data.width + " " + this.scannedID.image_data.height);
                imageData = this.scannedID.image_data.ios.UIImagePNGRepresentation;
            } else {
                let bitmapImage = this.scannedID.image_data.android.graphics.Bitmap;
                let stream = this.scannedID.image_data.android.java.io.ByteArrayOutputStream();
                bitmapImage.compress("PNG", 100, stream);
                let byteArray = stream.toByteArray();
                bitmapImage.recycle();

                imageData = byteArray;
            }
        }
        let param: TNSHttpFormDataParam = {
            data: imageData,
            contentType: 'image/png',
            fileName: 'idtest1.png',
            parameterName: 'image'
        };
        params.push(param);


    console.log("Parameters: " + JSON.stringify(param));
    console.log(params[0].data);
    try {
        const response: TNSHttpFormDataResponse = await fd.post(this.apiURL + 'VerificationID/', params, { headers: this.createRequestHeader(false) } );
        console.log(response);
        return response;
    } catch (e) {
        console.log(e);
        return e;
    }

它正在打印宽度/高度，所以我知道图像在那里。我相信我的 .ios.UIImagePNGRepresentation 没有像我想要的那样返回 PNG。如果我输出我用文件创建的参数，它会输出除“数据”（应该是实际的文件数据）之外的所有对象数据。我不确定从这里去哪里。任何帮助，将不胜感激！

标签： httpnativescript

解决方案

我不确定你是怎么到达的this.scannedID.image_data。

但是，如果您使用的是相机加插件，它将返回一个应用了适当宽度和高度的图像资产，在图像资产上使用getImageAsync(callback)方法应该返回 UIImage (iOS) / Bitmap (Android)。

在您的照片捕获事件中可能是这样的，

function onPhotoCaptured(args) {
  const asset = args.data;
  asset.getImageAsync((image, error) => {
        let imageData: any;
        if(image) {
            if(asset.ios) {
                imageData = UIImagePNGRepresentation(image);
            } else {
                let bitmapImage: android.graphics.Bitmap = image;
                let stream = new java.io.ByteArrayOutputStream();
                bitmapImage.compress(android.graphics.Bitmap.CompressFormat.PNG, 100, stream);
                let byteArray = stream.toByteArray();
                bitmapImage.recycle();

                imageData = byteArray;
            }
        }
  });
}

推荐阅读