Angular 使用post请求从ionic 4发送图像

我正在尝试发送一张由

Cordova-camera

插件使用post请求捕获的图像

将其发送到Django rest框架。它告诉我错误

类型不是文件

我在

.ts

文件中使用的代码：

import {Component, OnInit} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {HttpClient} from '@angular/common/http';
import {HttpHeaders} from '@angular/common/http';
import {Router} from '@angular/router';
import {ActionSheetController} from '@ionic/angular';
import {Camera, CameraOptions} from '@ionic-native/camera/ngx';

@Component({
    selector: 'app-add-dress',
    templateUrl: './add-dress.page.html',
    styleUrls: ['./add-dress.page.scss'],
})
export class AddDressPage implements OnInit {
    cats: Observable<any>;
    types: Observable<any>;
    sizes: Observable<any>;
    actions: Observable<any>;
    cities: Observable<any>;
    pic: any;
    img_1: any;
    img_2: any;
    img_3: any;
    title = '';
    desc = '';
    color = '';
    category = '';
    type = '';
    size = '';
    action = '';
    price = '';
    city = '';
    number = '';
    CategoryActionSheetOptions: any = {
        header: 'Category',
        subHeader: 'Select your dress Category'
    };
    TypeActionSheetOptions: any = {
        header: 'Type',
        subHeader: 'Select your dress Type'
    };
    SizeActionSheetOptions: any = {
        header: 'Size',
        subHeader: 'Select your dress Size'
    };
    ActionActionSheetOptions: any = {
        header: 'Dress Action',
        subHeader: 'Dress is for Sale or Rental'
    };
    CityActionSheetOptions: any = {
        header: 'City',
        subHeader: 'Select your City'
    };

    constructor(public httpClient: HttpClient, private router: Router, public actionSheetController: ActionSheetController,
                private camera: Camera) {
        const httpOptions = {
            headers: new HttpHeaders({
                'Content-Type': 'application/json',
                'Authorization': 'Basic ' + btoa('username:password')
            })
        };

        this.cats = this.httpClient.get('https://www.fostania.com/api/categories/', httpOptions);
        this.cats.subscribe(data => {
            this.cats = data;
            console.log('my data: ', data);
        });
        this.types = this.httpClient.get('https://www.fostania.com/api/types/', httpOptions);
        this.types.subscribe(data => {
            this.types = data;
            console.log('my data: ', data);
        });
        this.sizes = this.httpClient.get('https://www.fostania.com/api/sizes/', httpOptions);
        this.sizes.subscribe(data => {
            this.sizes = data;
            console.log('my data: ', data);
        });
        this.actions = this.httpClient.get('https://www.fostania.com/api/actions/', httpOptions);
        this.actions.subscribe(data => {
            this.actions = data;
            console.log('my data: ', data);
        });
        this.cities = this.httpClient.get('https://www.fostania.com/api/cities/', httpOptions);
        this.cities.subscribe(data => {
            this.cities = data;
            console.log('my data: ', data);
        });
    }

    // take Photo
    takePhoto(sourceType: number, img_num) {
        const options: CameraOptions = {
            quality: 50,
            destinationType: this.camera.DestinationType.DATA_URL,
            encodingType: this.camera.EncodingType.JPEG,
            mediaType: this.camera.MediaType.PICTURE,
            correctOrientation: true,
            sourceType: sourceType,
        };

        this.camera.getPicture(options).then((imageData) => {
            const base64Image = 'data:image/jpeg;base64,' + imageData;
            this.pic = base64Image;
            if (img_num === 'Image_1') {
                const thumb_1 = document.getElementById('thumb_1');
                const change_button_1 = document.getElementById('change_button_1');
                const add_button_1 = document.getElementById('add_button_1');
                thumb_1.hidden = false;
                change_button_1.hidden = false;
                add_button_1.hidden = true;
                this.img_1 = this.pic;
            }
            if (img_num === 'Image_2') {
                const thumb_1 = document.getElementById('thumb_2');
                const change_button_2 = document.getElementById('change_button_2');
                const add_button_2 = document.getElementById('add_button_2');
                thumb_1.hidden = false;
                change_button_2.hidden = false;
                add_button_2.hidden = true;
                this.img_2 = this.pic;
            }
            if (img_num === 'Image_3') {
                const thumb_1 = document.getElementById('thumb_3');
                const change_button_3 = document.getElementById('change_button_3');
                const add_button_3 = document.getElementById('add_button_3');
                thumb_1.hidden = false;
                change_button_3.hidden = false;
                add_button_3.hidden = true;
                this.img_3 = this.pic;
            }
        }, (err) => {
            console.log(err);
        });
    }

    async presentActionSheet(num) {
        const actionSheet = await this.actionSheetController.create({
            header: 'Add ' + ' ' + num,
            mode: 'ios',
            buttons: [{
                text: 'Take Photo',
                icon: 'camera',
                handler: () => {
                    console.log('take photo clicked');
                    this.takePhoto(1, num);
                }
            }, {
                text: 'Open Gallery',
                icon: 'list',
                handler: () => {
                    console.log('open gallery clicked');
                    this.takePhoto(0, num);
                }
            }, {
                text: 'Cancel',
                icon: 'close',
                role: 'cancel',
                handler: () => {
                    console.log('Cancel clicked');
                }
            }]
        });
        await actionSheet.present();
    }

    get_form_data() {
        console.log(this.title);
        console.log(this.desc);
        console.log(this.color);
        console.log(this.category);
        console.log(this.type);
        console.log(this.size);
        console.log(this.action);
        console.log(this.price);
        console.log(this.city);
        console.log(this.number);
        console.log(this.img_1);
        console.log(this.img_2);
        console.log(this.img_3);

        const httpOptions = {
            headers: new HttpHeaders({
                'Content-Type':  'application/json',
                'Authorization': 'Basic ' + btoa('username:password')
            })
        };
        const request =  {
            'item_title': this.title,
            'item_description': this.desc,
            'item_price' : this.price,
            'item_price_later': false,
            'item_action': this.action,
            'item_color': this.color,
            'item_category': this.category,
            'item_type': this.type,
            'item_size': this.size,
            'item_city': this.city,
            'item_phone': this.number,
            'item_image_1': this.img_1,
            'item_image_2': this.img_2,
            'item_image_3': this.img_3,
            'created_by': 7,
        };
        this.httpClient.post('https://www.fostania.com/api/items/', request, httpOptions)
            .subscribe(data => {
                console.log(data['_body']);
            }, error => {
                console.log(error);
            });

    }
    ngOnInit() {
    }

}

HTML工作得很好，当我发送数据时，我检查了我的

网络

选项卡，请求正在发送

---

这是我得到的回答，

{“item_image_1”：[“提交的数据不是文件。检查表单上的编码类型]，“item_image_2”：[“提交的数据不是文件。检查表单上的编码类型]，“item_image_3”：[“提交的数据不是文件。检查表单上的编码类型”。]}

您在这里遇到了一个问题：

this.camera.getPicture(options).then((imageData) => {
            const base64Image = 'data:image/jpeg;base64,' + imageData;
        }, 
 this.img_2 = base64Image;

this.img_2

变量是在相机拍照之前设置的，这意味着

this.img_2

将null

将其移动到您的承诺回调中：

this.camera.getPicture(options).then((imageData) => {
                const base64Image = 'data:image/jpeg;base64,' + imageData;
                this.img_2 = base64Image;
            }, 

---

确保在使用前获得图像。

您在这里遇到了一个问题：

this.camera.getPicture(options).then((imageData) => {
            const base64Image = 'data:image/jpeg;base64,' + imageData;
        }, 
 this.img_2 = base64Image;

this.img_2

变量是在相机拍照之前设置的，这意味着

this.img_2

将null

将其移动到您的承诺回调中：

this.camera.getPicture(options).then((imageData) => {
                const base64Image = 'data:image/jpeg;base64,' + imageData;
                this.img_2 = base64Image;
            }, 

---

确保在使用图像之前获取图像。

这很有用，现在变量在内部声明，它获取数据。但是它仍然给了我

“提交的数据不是文件。请检查表单上的编码类型。”

当我尝试与post请求一起发送时，请发布组件的完整代码，并在浏览器的网络选项卡中检查请求数据是否正确发送。将完整代码添加到问题中，请检查它。这很有用，现在变量在内部声明，并获取数据。但是它仍然给了我

“提交的数据不是文件。请检查表单上的编码类型。”

当我尝试与post请求一起发送时，请发布组件的完整代码，并在浏览器的“网络”选项卡中检查请求数据是否正确发送。将完整代码添加到问题中，请检查。