Как разместить multipart / form-data из angular в Django REST API - PullRequest
Новая
       31

Как разместить multipart / form-data из angular в Django REST API

0 голосов
/ 16 февраля 2019

Я использую Django REST API и Angular 6 для внешнего интерфейса.

Я определил ImageField в модели Profile который принимает ввод файла.

В угловом приложении я генерирую File объект из данных изображения Base64 и отправляю в конечную точку с заголовком как Content-Type: 'multipart /данные формы '

Отправленные данные:

enter image description here

, где first_name и profile.avatar - поля формыprofile.avatar содержит файл изображения.

Но на вкладке сети параметры, отправленные для profile.avatar, являются пустым словарем.

enter image description here

Как отправить файл мультимедиа в виде данных формы из Angular в REST API?

Изменить 2: Код 

submit() {

    // call method that creates a blob from dataUri
    // imgSrc[0] contains base64 string
    const imageBlob = this.dataURItoBlob(this.imgSrc[0]);

    const extension = imageBlob['type'].split('/')[1];
    const imageName = 'file123' + '.' + extension;

    const imageFile = new File([imageBlob], imageName, { type: imageBlob['type'] });

    const fb = new FormData();
    fb.append('profile.avatar', imageFile, imageFile.name);

    this.account.updateProfile(fb, {headers: {'Content-Type': 'multipart/form-data'}}).subscribe(
        res => {
          console.log(res);
        },
        error => {
          console.log(error);
        }
    );
  }


  dataURItoBlob(dataURI: string) {
    // Split from , (comma)
    const b64Split = dataURI.split(',');

    const extension = 'png';

    // remove data:image/png;base64, from the base64 string
    dataURI = dataURI.replace(b64Split[0] + ',', '');

    const byteString = atob(dataURI);
    const arrayBuffer = new ArrayBuffer(byteString.length);
    const int8Array = new Uint8Array(arrayBuffer);

    for (let i = 0; i < byteString.length; i++) {
      int8Array[i] = byteString.charCodeAt(i);
    }
    const blob = new Blob([arrayBuffer], { type: 'image/png' });

    return blob;
  }

updateProfile метод отправляет данные, используя PATCH метод.

...