Статическая папка NodeJS не может загружать изображения в правильном формате?

#node.js #image #express #static

#node.js #изображение #экспресс #статический

Вопрос:

Вот мой server.js досье. Когда я ее запускаю, в статической папке хранятся файлы, такие как .txt good, но изображения имеют нечитаемый формат и не могут отображаться в браузере. Проблема: app.use(‘/uploads’, express.static(path.join(__dirname, ‘/uploads’)));

 const http = require("http");
const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

//See the react auth blog in which cors is required for access
app.use((req, res, next) => {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Headers", "Content-type, Authorization");
    res.setHeader('Content-Type', 'application/json');
    console.log(
        "Req body=> ",
        req.body,
        "Req query=> ",
        req.query,
        "Req method=>",
        req.method,
        "Req url=>",
        req.url
    );
    next();
});

// static folder
app.use('/uploads', express.static(path.join(__dirname, '/uploads')));

app.use((err, req, res, next) => {
    res.status(500).send({ message: err.message });
  });

const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
    // eslint-disable-next-line
    console.log(`Magic happens on port ${PORT}`);
});
 

Например, у меня есть изображение в папке uploads под названием 1.jpeg и когда я ввожу адрес http://localhost:8080/uploads/1.jpeg браузер показывает:

 �����JFIF�����������    ( %!1!%) ...383-7(-. 



----------------------------------- ----- ---------��������������������������B�������!1AQaq��"2�BR����#br���34CT$S���������������������7������!1AQ"Baq��2����3R�#�4C��������?��A�ң�,p�ɱ�8���4"@� "@�m�Emr�
�=�Qa�;�Xm�-�"�hw��M��n�v���`�л����2A�@��@������@Y7I�ƘXh�v�ٔF���lh,� (�� ��
VZ�caJ�Q@���8�  hD��@�
�na�;�Xm�-��b���Y.#E�"4��O�s�O�J4te�z
��EFF-r�PI��7Ht�����!�n�
�f6¢ͨ���ZE�� -D��t���R�� ��‹)Dq
VR�����)Aܦ
CPC�E��nQd�7)�r�%�nS�h��h�h]�vC���솀bL��@1 �Y
��Mq�I9Qq�䬩�R��d��v�ݠff²��D���f�%ͅ 4�i�
|9)l�1.�amp;�b��Z�ޑ�H읣�R��KVR��Y{C�J�i7)ض��E�ћV5Hk2�]z�}z%͚�Fc9�A�NŴ��Y. �'b���7LI�л�읢���@bL�ƂZƙ
sx<ՍMDZS�i�)rVcL�amp;Dـ���k�Y(��iw%�24Yi�%��%�h��c���=�V�{6c�)�#E���I�@��'��n'�����n4XX�R��t7��nLoe=c��amp;��5��8b9'b���,:`8tY=2{:{��amp;�'�]�vC�7)�.�S�7�S�T9.�`u��G�3�L�jVe0�,�pЧd8bN��A�N��vK��$썢�4X�E�'d�:�K�A�7�?z��G�ጓ:x�>ZsO��P�隕
�3�N��i��0�Nh� ;7ڋ#�o�"�mFV��ε�Z*��ڍ�´
�J�T�=���{��"3f����b-n�o?D�1�@n�}l)I�蚑.(W�ީ;%�fp    ����AG#I�f�`"��8Q܋'bL�A�j���c��e���bm��hc����ʏ k2M�Z)�1�)1*�w)����1'd8bN�pĝ��
�,����b�vA�.���Ѫ]�Ӡ��$��yC1�
amp;�J��Їt�J�����3�A!��'�$�1�!��p@��F��@��amp;���y#��Ȩ�k�@�Ozv!7$�j�
�Š���L�������-��1܅�oe(�n��@W��"^2��*����x�2rBѐĴ���CvC�I�'�)�;%�a�F�z-��Do@�4Oe=�]�
<z�=$�C[�V�[��M��i�J�o�amp;l�1<m*���RZ4o����@ּr@��1X��hR���30��@|��Bb�_v�@���  P�s� 
����g���M$gtA]���E��p��V�A(��^�@�٢�E33�4������Uf;��L����amp;�E�jF����X��,�Xو��Ad����f�tHt�s�4�s�1⾨_)Ӷ*B�GT�{Hamp;E��{�b�_5��x_��0.d%�1������"n[̠Tz�ˆ�Ψ
)$*!������eduL�eE�Ӝ֣q��kZ��U�Ԭ�D`Ԭ�5 *�
J�C����V:
"�AHI�)"R����I�Pي,TLɊ�P  S�b� ���hR�1S�I�d��ՉҢ8jvVуR��F �t0��i 

 (4�������j@P)�R,(���H�P)1Q);��Qb�Z,(R������P $)jBqLBĭ��B�%���1r����~c������A   X�! 
:
,(4��(!0
amp;���I��HR�� TJN�D�X�����
",T
N�@E������a@@P
A@��@X�7��p� �aA�n
"�A�XPBv�0
��`Ie�b��r,1��7cJ��)jTU�BT1JCC",(�
",TX���Z,TDXP��pm(�A�-��RQ6�Ѹ6��ro:v�27�Ї%�6��=�9��(!��
�Zd�Xժ!�1�T�l��Td��*H�Ƥɰ��-J�L��H�ʈP�B�ISc�fKp虑�(��(��)r��W>�<:�F�N^?��HEɈ�w5���5�U��M$y}��OóHb�^�DM�X'�Z�ٛȑ�/��lg¸e��i`���>$uבy�,a���^1��2=]���c�O�����������w�/Z��=�z�z���9��(9��*d��HT3J���s�r5F���ɚբF-���"
tM�1�D���-R�I���Y�e#T�V2f���d�U�N��Y�Fg84d�<�{��|#���v����}F�<�����t'�y����[�agヒ��E��IWcWs�m-�,����'��䷌L���y[�rJ�� Dsȩ�ѓ�!�?F���M�p�Jb�0z�1PC�)��k��d�Z¶��h�]�ل��.�a"�0�D0�" ���Yh��h�E4��wU��I�.��(��v����tz�=W�?�'dt�_����c{bƃ���ȸ�>m�K%�F�F��C�m-��\��^�W77`�*����9MC�|zw�YL�B���ˢh��(��;G��;]33���e-��V��b�`LGߙ�a�f�o�<Ƌ��gĨ���wf ���n��V�
V��n=�Ty�����^e�c�0G����pg,��c�����^?c>����3�x��1k0��~F�q,���z8�8�}Ni㟑�Zy5��|amp;�iBK��
�40*�!��$(�ZV:eRbZ�%g<ЏviR}�ϗo�ۡ�'��^�ҧN_fuGA����qq��}��`E�I�
�5�e��n�Ǐ7�����׷/�ɓ�X�����4��s�j��Gb�~����f3,����t�ౖy��r��x��
H�$i�Fc�z.�M�6a�����6kŒ����.O�F�2���/eM�|��X܎m^I8����<�ъ�KE48��-z�]*<mD�0nz���O��4kX��$���S9X��;%ŋ��d�'�i �0��K��[   �,�x8�O�͓I���Ǫ��ϙ����?�k$��駢����7���ē;l��Dq�<��揳D�/>^��|;���)~$��ۆ�d.��O��G�sO�yS�K�:���?�/��ŷ�<��-?yX�^/�s]��K�t ڐq3<x��T0��m��Y�������G����� U(�ߛ�$��l�ݏ�o�QP5!?�%W��,���'�/�����/����Nn��wm��k�����k��o�e�E9{�o�t�h���7�=3z-|��� �l�ڿs{v�E��ׁ�ڽ%�x��amp;s=U-�b�����ߗ� �m;t��3�>��WK�e�hF���H�:�᭮l�c�:�h�gu���Ms.�Ў� ȯ2ZX��GN�.��=� ��}q����E���໔�4�pa>�EuJ߆�W2C44|D޷�e�>�9��T������t�W�^��$r�G?�����.�`��c-^%��v�~C�]1���������h@~�x�=V�E�G�`~4.V�� �S��qn������ZŘ�)�_�Z���P��V���W�;amp;��-�Q��h��amp;h�k3H�"96@H�H� �i>���k�7C�x�����Y/t8����X!�uG,��,T���XK�����,C�����Ȼf�fq<J�x�a��a��¥0_�4qO��y�c�   ��%�1}���a|���J�"l�$�<���!6̓H��5��|��ٕع$H�N����A�t(��sɔ;jN8M(������j�C�}iI��g�jl��Ԟ$�X�Dz��<�Mvf �<I�권Q�9�̨�U�FNl]�{Iseo��j�L�amp;TJ6� �4z�)�6ӴinԔ} �GJF�U�x�����R袽j~$�cվ��>�ğX�ۇ��GO�u�cZ
E
E"��3X�crɣ�241�7x���RGLY��䎨H���Q:��'���M7��y�rF�L�E��W/ �7vr12Y[�4�/�fYJ�(�̒��)ɳ"J����l��:1I7r�08�������D�B���=U����
�!��
�2rb��tQ;�%2m��b�L@@��"�d����"�c_ܥ�ԋY'���T��!Y��camp;h���9#�4�匑��z�H茍�H��N��SK'4L�3���4�,��P%�6.r(�� L�dt������2211��Oԭ�旴��D98��̎r�#���hͱS!�IL�)��-`D
��ܐ`<RG�R.����6Z�JY�t_�m�F�=dѼd_�7x�݅6������$Q��Ǝz)8
H��#`n)�Kb�F4ɛ��:UҢq����_��]�r��
}�꘷Z*�����]�)ps�i�<�3TT5Veݖ9�Z)L���DZ��>
ʢ@�i�" 
�3fO�~���Vj�vt��L���3x�7Q_��N����?̰͟���������ߺ��   v���k'�I���������Z��(�J���Zǩh�2.l�MT˙*�H�ق���1��r�Ů�_�U;8-��a)���W;Kj��tt��ah�.��   乣������k�퍈��`%����;�T̳��w�n5�a�VMI!��w�i9���÷�a������8�����U:�kO!��^��Wt��,���j��폇�lC�����2IiY�UzģJ���Ћ�ty�cC^Zׇ����˻����œ�T]�LJs�lq�tV撳5RuGGd�C�p
nF޲�S><�J%��W��m���wfc-�
�����Br���;�.5���M�;�??�睰".�PԸ�]V�ԵS�H斏�f�����o�b���(�����qS�z��U�ɏM%I�iv!Ѳ7��  :���rN�t��!OA�o��;'�fY�I �<���D�.���$��d�w=��Ci~�����,�;#�@3�dov�J珤g�)$���o/F�kqn�n���0]����ψźVGE���v�V��Z=l��R���z_�C�n��}�����v�
0�G������q�@V�s��˨�������tg�.�q����|�ۥ���n�׭���������Ք����:�ƆrE1Bb$40)�c��ԇSE��%E)�T���v�3�t�4ci�_�����B��z/nM���ڸvf{۞Z2X��%�,eQG����[}��vn�J^�Qf���#���Q�K_-�Lf�|��I�ĺ���=<b��amp;�Ri���S�5*�G��Қ�Ai����38epv���/{�J:�8�����jg9|s�l
�10�B�(8|�.Ib������XEp��amp;'lO���綶����0�M7��YS����cY��jr��u���m�8�j2�Ivbe��I#��޺!���ɒs������X��W0�F�MSn��������te�8amp;�Կ_���M$a���ћ9���|��P}G����(Mt������CZyk]u��ᣂ��i�]7Ix�^Ց�Ϙ����1�h�ɨ���:{ZV���f5��A�HKQ�vo�H6��]w��$s$p��%/8g�����'x WS��W�2�Md=
�"�S) 5A���3�����N���sWf�gf��Qq���*걞���7��r�>��S���ָ�P���ޞ��~��xq�:����6�~_����G���ђK�-�A����Q����떏�Z�.˽�=X�x��DjC������˃�>�ݕ���F)6`����f����[,�j.?��������eS�fqg�r�ٜ�u���W��ҵ=�8��'H�'F���0wR:��)-��:c��bO��|�n�v��t4�W�I�v6{p���瞗�x
�t]�¸o��%�|�ٙX��@Y<���fNN�vk��*L9h�����
D3'���Q����ak��`��}�%:cѰ�Z�c�봔O,���RAT� �
z1��O�ML�c!���kU����ce�[Z}��� ��4V��U��rr��#��UБ��b� VL@@�D��ԐYo���������틁ͼ�7=�Z��8�d'��ֳV���{�G��mO��t1���FL,l��
mgBz���):�k��a�|�]��j
.��t�z���C�ƭq�s`P���ϑ��GX��u{�s���{��I�N�:c�amp;��'��d�ɕ�9,��c�����0���j�nɷ�:�k�E#!?՟���6lU5���ۋ"�������x9�=ѧ
x���~�Jr�dɀ�ێ���IA>i9q��������8������c�f��^���sK��cf䩣���o6f��ek��~
aw�����:Y�{��s10��d}8���i   �9zpx���Ro���w�R,�JZ�G%3��^)��4j��evg���8,q��l�:��amp;`q�����)LD����*b%����D@� amp;��!��sG�X�x��r^$��Q�H�8J��h�xͤL�F�l�l���Ԇ���x�5yw���������v4Zt�o��V{��#;!$�6x������m��P�����]���#H�8Pz����dz]D1�I�gNCc�u��tGt�]���lU��l�T�
���Z��#��ƻ�G�[���.y>���x7�g!p�8�ϒ8�]����j�v-�����-V�[9rK�iv o��W܅�4L��̊ DL��R`�rh@L���D�@@�B@BP�0=�.�amp;0�5���?J��<����4���v�����76�#���8��Y˹�W�J�E9�Uj�"�����AHh�ا�O�(x)PJ�amp;�$�|.'[N��o�>Rj���rl�lͬ�X���]��>m:�$�du`�<Piwg9�k�.(�n݀��B�"`@� : ��H`q��"b% �Z��" ���v{d�;!i�ڗth�V�����:���x�����:(�^@��na-amp;Y�Ƨ%VV�1e��:2��֒[H�*0Z�.��nrҨ�K�p7%vnG�����B�!�D �SP�@P0 A�amp;��A(`��1( ]�3��4��3ҿ�_3��W�%�<����1/�٥��>Gamp;���3��������O�iڿ�D���<���
 

Кто-нибудь может объяснить, почему это происходит?
Заранее спасибо

Комментарии:

1. Почему вы устанавливаете Content-Type значение application/json для каждого запроса?

2. Потому что, когда сервер отвечает, клиент автоматически определяет, что ответ находится в формате json

3. Попробуйте поместить свой статический метод перед этим улучшением заголовка ответа.

4. Я даже удалил или заменил перед установкой заголовка или bodyparser, ничего не меняется. Результат тот же — нечитаемый формат.

Ответ №1:

Лучше использовать MULTR npm вместе с express, вы можете сэкономить много времени с этим.