如何在 nativescript-angular 中為圖像做 http post

Question

所以我試圖將用戶圖庫中的圖像上傳到我的 API。 目前，我可以從圖庫中選擇圖像，但它不允許我將所選圖像傳遞到另一個函數以將其發送到 API。 API沒有問題，已經過測試。 我正在使用“nativescript-imagepicker”插件

這是代碼：

  getImage() {
        let context = imagepicker.create({
            mode: "single" // use "multiple" for multiple selection
        });

    context
        .authorize()
        .then(function () {
            return context.present();
        })
        .then(function (selection) {
                selection.forEach(function (selected) {
                console.log(selected)
                this.uploadImage(selected)
            });
        })
        .catch(function (e) {
            console.log('error')
            // process error
        });
}

uploadImage(imageAsset) {

    console.log('uploading image')

    let token = JSON.parse(appSettings.getString('token'));
    let options = new HttpHeaders({
        "Content-Type": "application/x-www-form-urlencoded",
        // "Content-Type": "application/octet-stream",
        "Authorization": "Bearer " + token
    });
    let userId = appSettings.getString('currentUserId')
    let url = 'http://localhost:5000/api/users/' + userId + '/photos'
    console.log(url)
    this.http.post(url, imageAsset, { headers: options }).subscribe(res => {
        console.log(res)
        console.log('Success')
    }, error => {
        console.log('Failed');
    });
}

它運行 getImage 函數並將我帶到畫廊，然后一旦選擇了圖像，它就會運行 console.log 函數（它可以正常工作，因此我相信正在接收圖像並記錄圖像的路徑）。 這是 console.log 的輸出

{
JS:   "_observers": {},
JS:   "_options": {
JS:     "keepAspectRatio": true,
JS:     "autoScaleFactor": true
JS:   },
JS:   "_android": "/storage/emulated/0/DCIM/Camera/IMG_20200211_200350.jpg"
JS: }

但是，它不會對圖像運行“this.uploadImage”函數，因此它會跳過此操作並轉到“.catch”塊並記錄“錯誤”。 它還在控制台中記錄了這一點

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'uploadImage' of undefined
JS: TypeError: Cannot read property 'uploadImage' of undefined
JS:     at file:///src\app\_mocks\test\test.component.ts:38:25
JS:     at Array.forEach (<anonymous>)
JS:     at file:///src\app\_mocks\test\test.component.ts:36:30
JS:     at ZoneDelegate.push.../node_modules/nativescript-angular/zone-js/dist/zone-nativescript.js.ZoneDelegate.invoke (file:///node_modules\nativescript-angular\zone-js\dist\zone-nativescript.js:388:0)
JS:     at Object.onInvoke (file:///node_modules\@angular\core\fesm5\core.js:26256:0)
JS:     at ZoneDelegate.push.../node_modules/nativescript-angular/zone-js/dist/zone-nativescript.js.ZoneDelegate.invoke (file:///node_modules\nativescript-angular\zone-js\dist\zone-nativescript.js:387:0)
JS:     at Zone.push.../node_modules/nativescript-angular/zone-js/dist/zone-nativescript.js.Zone.run (file:///data/d...

Answer 1

進口

import * as fs from "tns-core-modules/file-system";
import * as camera from "nativescript-camera";

職能

    // This method allows the user to take a picture, save to the gallery, display it on the screen, convert it to base64 and then send it to the API   

1. 拍照，保存到圖庫，另存為base64字符串，顯示在屏幕上

   takePicture() { const options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true }; camera.takePicture(options). then((imageAsset) => { console.log("Size: " + imageAsset.options.width + "x" + imageAsset.options.height); console.log("keepAspectRatio: " + imageAsset.options.keepAspectRatio); console.log("Photo saved in Photos/Gallery for Android or in Camera Roll for iOS"); const imgPhoto = new ImageSource(); const that = this; imgPhoto.fromAsset(imageAsset).then((imgSrc) => { if (imgSrc) { // This is the base64 string, I saved it to a global variable to be used later that.bstring = imgSrc.toBase64String("jpg"); console.log(that.bstring); // This bit saves it as an 'Image' to the app const mil = new Date().getTime(); const folder = fs.knownFolders.documents(); const path = fs.path.join(folder.path, `SaveImage${mil}`); const saved = imgPhoto.saveToFile(path, "png"); // This saves the image to the global variable which will be used to display it on the screen that.saveImage = path; that.picHeight = imgSrc.height; } else { alert("Image source is bad."); } }); }).catch((err) => { console.log("Error -> " + err.message); }); }

2. 將其發送到 API

    // This is just a generic API call that uses the base64 string as the image // you can choose whether to call the function and pass the image into it, or just use the one saved in the global variable uploadImage(image = null) { const imageString; if (image) { let imageString = image } else { imageString = this.b64image } // This is where you create the object to be sent up to the API, in this example I'm sending up a description aswell, so I've added the property here const data = { B64String: imageString, Description: this.imageDescription }; // This is where i create my headers, in this case I'm using authorization const headers = new HttpHeaders({ Authorization: "Bearer " + appSettings.getString("tok") }); // This is my API call this.http.post(this.baseUrl + "users/" + this.userId + "/photos", data, { headers}) .subscribe((res) => { console.log(res) }, (error) => { console.log(error) } }