以http post angular 5发送表单数据

时间:2018-03-08 17:24:16

标签: angular django-rest-framework angular5

我在django rest作为服务器和角度5为客户端工作。  我想将一些包含multipart/form-data类型的图像的数据发送到服务器端,但所有这些数据都将以标题的正确方式放置,如何发送此数据?

   public video: Video = new Video();
  onSubmit({value, valid}) {


    let formData = new FormData();
    formData.append('title', this.video.title);
    formData.append('mini_description', this.video.mini_description);
    formData.append('you_need', this.video.you_need);
    formData.append('you_learn', this.video.you_learn);
    formData.append('full_description', this.video.full_description);
    formData.append('price', this.video.price);
    formData.append('video_level', this.video.video_level);
    formData.append('video_length', this.video.video_length);
    formData.append('image', this.video.image);

    if (!valid) {
      return false
    }



    let headers = new HttpHeaders().set('Content-Type', 'multipart/form-data');
    let options = {
      headers: headers
    };

    console.log(formData);
    this._store.makeProduct(formData, options).subscribe(data => {
      this.productObj = data;

      return this.router.navigate(['dashboard/superuser/add', {upload: 1}],)
    })
  }

当我在服务器端打印发布数据时,我看到了这一点:因为您看到我的所有数据都标题错误

{'title': ['vavav\r\n------WebKitFormBoundaryfE6QfyptbJPk70Xk\r\nContent-Disposition: form-data; name="mini_description"\r\n\r\nvavav\r\n------WebKitFormBoundaryfE6QfyptbJPk70Xk\r\nContent-Disposition: form-data; name="you_need"\r\n\r\navava\r\n------WebKitFormBoundaryfE6QfyptbJPk70Xk\r\nContent-Disposition: form-data; name="you_learn"\r\n\r\nvava\r\n------WebKitFormBoundaryfE6QfyptbJPk70Xk\r\nContent-Disposition: form-data; name="full_description"\r\n\r\n<p>vavav</p>\r\n------WebKitFormBoundaryfE6QfyptbJPk70Xk\r\nContent-Disposition: form-data; name="price"\r\n\r\n444\r\n------WebKitFormBoundaryfE6QfyptbJPk70Xk\r\nContent-Disposition: form-data; name="video_level"\r\n\r\npro\r\n------WebKitFormBoundaryfE6QfyptbJPk70Xk\r\nContent-Disposition: form-data; name="video_length"\r\n\r\n333\r\n------WebKitFormBoundaryfE6QfyptbJPk70Xk\r\nContent-Disposition: form-data; name="image"; filename="php.png"\r\nContent-Type: image/png\r\n\r\n�PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x00�\x00\x00\x00�\x08\x03\x00\x00\x00\tm"H\x00\x00\x00fPLTE���a��Rw�\\}�^\x7f�Uy����Y{����Qv�������y��������������i�����������t����ՙ�����n����ȟ�в��������뇞�@k�v���\x00\x00\nhIDATx��関:\x10�%�\x11E\x16\x117�����\x05l�TR� �=���kδ@��ZRYf3� \x08� \x08� \x08� \x08� \x08� \x08� \x� \x08� \x08� \x08� \x08� \x08� �Y�/�m~ޕ�S\x12E�1{p,�(9-��9��.�巛ٟ8���29\n.�T\x15�\x0b.�\x08�T�����\x7f�~���^���4�v�=���2�\x18���y�\x12�\x1b\11T����,���?ۥ���pɪ��\x0b�+�d�\\7�Ł��k$X5\x18};�ѥ��eA��̿-XC��T%�\x18G8M�Jΐ/��v�<_dr|�t1%���/Y��\x1c�r���R�e��|Z�[\x19ȑ��\x07�dv]\x7fN���\x7f�� J\x06�G�Lw\x1f�=\x00��yb�\x1a�Q�N�\t���\x08�X��N���\x1c�;�\x12�Z#\x1f$bՑj7MG\x1e\x12�n�D��h��uF�N�[�6\x1b�\\�U\x7f�~\x04/%X�\x19U�<�Cڣ��D��)!��ɘ\x07��\x0b\x02\x06R��\x02�h2n��_��ߗ�1�k\x10�\x18n��hx����\x0eu4���}Xj�\\�#\x18\r/�w^ǔ��9\u05f6�{�\x0f���2���_�\x1dޔo\x1e�q\x1a���`��\x16;�U���HM\x11\\�����\x05\x17��q��%��h6�ᓰl����\x18oz\x04\x1d�n�y�:�JV�p�o�\\\x7f�}��%�7\x7f\x01�QmE\x02G�]D�`+_\x01�.SQ����m=\x11���\x07��X�Nt|Bv�,=�1>v\n�[��H/�]\x12�s\x10Q���\x07��auM\x04��\x16���\x13�76�S�Z���!���i(��/�\x0c�Q�Tl�.��duv=��\n�6S��\x02f�v\x12�x��>\x0c��i#\x0f^-vkqV\'��@%��b��"�i�lv~9c�W�_�/���\x16M�\\�X8|9w�����\x7fpߌ���iq6?�".��Y�\x12\x0e����,}��p����\x06{k�r�X�Ȏ�qv�u�\x7f)/}\x0cT��~b�\x08��[��%�ȰuZ�v\x07z�c��7�R^����\x13U���\x1aM�D�R�S>�\x1e1[>�M��\x1b\x0c3���G�\x1a��\x13�7\x16�8m\x1b�\x1eU>��\x19�\'";���՝\x082���\t���9�y�\x10�\x7f�_O�,9[�o�\x1a\x16C��c�\x1a�[S�\x08�\n\x0b3�ͪ?\x1c�N�\'\x13R@����\n�\x01+�}�s���>��E��\x14u�\x060z�O\x083/�F\x1dt4��\x1c��J��ck\x14Jc\x04�-�����|\x02\x18UlkOB7X\rS�h�\x1aMx1~o���һ\x11���D\x0fɽ2\x0f\x01\x03���\x051\x01��\n�n9�5���o6�\x01r�\x18ѻ\x11\x0c�r+�o|�\x10F�\x1c�Ј\r\u0557t��k4P�ƗJ�\x7f��7`���v��N���u\x1bU�\x0bh�G\x0e\x1c�m3\x0c��IXZD�\x0c:��!��F��W\x01s\x18U�u8A+�`���Pӵ���\x18��\x15��f��\x0fA�c�Ȉ�\x05�\x11-��${^+@u�k��ma���e�,�\x108\x1a�ۍ><B�XO@�4F\x07]\x13�z\x18bZF�a0-.�B\x7f\x06\rD�\x1dB�ئ\x00����RwM��6�\x10\r���k��ia\x07�+,\n�ʥr8\x1a�d#�\x06�\x04\x18\x08�m�\x056�g��~�z_X�HCИ��h@�V;\x1a\x01�@\x1d\rԢ=�\x7fۢ\x1b���\x0ca�\x15]a\tA>�\tAc\x12�\t\x10����|\\���ۣ\x00xUkO\x03@�����\t�\x15�\x1fV1\x18:���hPw-\x04�G�/�����\x10\r|\x18j�F�-�N|\x1c\r\x18\x04����o�\x11�y�>���8x5j�\x12��<t�\x04:��0c\x1d�?F��=�\x06#�+�\x1aǜ4���r\x06\x1d��\x04�h��\x1aFC4���;r/;�\x1a�V\x0f�\\h\x16����\t��p���p�\u07b5+��x�\x05�8�#(\x18�S\t���\x13#���\x0e\x0eA�x�\x12L�F;�\x19�e>P\x00��\x07{t�\x05��`�S\',�q�k���Ԫ�\x0b����\x01\x02��l\r9f\x08���dl�\x18����\x16qM�Q\x7f�r� Z��Q�\x03�R.Wܬ4G\x02�\rK\'���c�pMBIs\x19�=T\x04FQ��#�J\x08L\\4�}\x1e0���,gVJ�Y��7\t0��&�\x01�6\x02ߐ�ʜ�_:\'\x0cpI�cg,�u�y�$߬�Bx]Ӈ�ƊH��\tjq��Fw�\x13\x1c�֝�\n�5�F\x03�*\x1d�hl�8�>�\x06�M\x0f�Tսo��\x1aRE�������L܅c��XDZ:\rѽX��\x04�~��N:��m7{G��1�\x11��\x1aR�H\x03�\x13�\x03024*�ŅC@�`�\\���{U�?K�0?���d4�ZL\x0b�Yً�čy:���+�h�\x16a\x19������5�,��k��x:���u�\x04d47\x1fG��/\x0b�S-!����1{\x1d�b���ۅ���\x13H�\x18\x0c�c(�C�u,\x02�e\x7f@�\x12������tO\n\x15\x1a�����\x07��z����hʺF����)���y@�nX�Ka\x1a��̵���\x120�R`�\x17�+��w训o�\x1f�[۲\x1d�k�\x14(�6�Q\x00\x05������q�s��?욕\r\x00\x14�\x07hQ�c��}�,t\x1bc�\\B\x00�f�\x16Î�*e�ka~���\x1f�ŖE3\x0fd��ƶͳ0?�f�z���^��cڲu/�.x02�N���u��7�\x19��i\\�\x1cC��==��^��U�QpU��pn�m���,٫��\x1b�h��E?\x01+\t�,\x19̗�q�#h�y����F\x00���Df\x08���J\n��y��lk�~P��)=�A8P��k\x03�K�@��\t\x0f���\x01�V��a\'=�=UJ<i��O�͂�\x06��\x18�o��%\x7fU���4g��A�L����\x0c��\x08�\\ǯ��\x13��R���~Z|�\x0ciݍ�G�2Ԙ��ҿ�G@\x15�{\x0e�"\x1e�,��\x0c;�=\x1b�<��\x0c>�_s\x18~��T�r�B��{1�aܻ?�^?V�7��-����\x1d\x11\x16\x03\x1ch\x0b�\x04?��y��c���{�F�K>�=Q5���5\x1e�%㚟M�\x0bط�kS2��cL�m�� �bA���\x13��\u07bc�?|o�˹��ݗ�}��3��_:�p�+v,�\u07fdAy�;h9�a�����v��{�G\x12��\x07��G��7�{\x12���q\x17�\x101\x1fwA�w\x7f�.�\x17?�y˞�y���*ٲ�u{���ykėC�+�#W͝�\\�\x17�#w��ǝ�*(��;�\r�is��u��\x1b��\'?��on�x�>A\x10\x04A\x10\x04A\x10\x04A\x10\x04A\x10\x04A\x10\x04A\x10\x04A\x10\x04A\x10\x04A\x10\x04A\x10\x04A\x10\x04A|��\x01�ϔ�^�u�\x00\x00\x00\x00IEND�B`�\r\n------WebKitFormBoundaryfE6QfyptbJPk70Xk--\r\n']}

1 个答案:

答案 0 :(得分:0)

我修正了我的问题..问题是额外的

'Content-Type', 'multipart/form-data'

我传递的标题无需这样做

这个问题花了我几个小时,如果你遇到像我一样的问题,这个答案对你有帮助。