如何将多部分/表单数据从angular发布到Django REST API

Question

我使用Django REST API和Angular 6作为前端。

我在配置文件模型中定义了一个接受文件输入的ImageField。

在angular应用程序中，我从Base64图像数据生成File对象，并发送到endpoint，标题为Content-type:'multipart/form-data'

编辑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方法发送数据。

Answer 1

我也遇到了同样的问题。在我的请求头中，我指定了一个content-type。一旦我删除了它，我就可以发送文本字段和文件了。对于post请求，还必须使用formData，如下所示：

let formData = new FormData();
formData.append('textOrFileField', yourTextOrFile);

希望这能有所帮助！