環境
Chrome 83.0.4103.116
ruby on rails 3
目標
ファイルアップロードにて、手動でFileオブジェクトを作成しajaxでサーバーにデータを送る
問題点
[正常]
railsのviewにてfileをアップロードした場合(=<input type=file>をそのままformとしてアップロードした場合)下記データがサーバー内に保存されている
PNG IHDRݡtEXtSoftwareAdobe ImageReadyqe<#iTXtXML:com.adobe.xmp<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 6.0-c002 79.164352, 2020/01/30-15:50:38 "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmp:CreatorTool="Adobe Photoshop 21.1 (Windows)" xmpMM:InstanceID="xmp.iid:F66AE3CEAF0311EAA82AEE1161ABBC23" xmpMM:DocumentID="xmp.did:F66AE3CFAF0311EAA82AEE1161ABBChRy;\@d X` X X`` X` X X`` X` X` X X`` X` X X`` X` X` X X`` X` X X`` X` X` X X`` X` X????axCp6escription> </rdf:RDF> </x:xmpmeta> <?xpacket end="r"?>Ğ5IDATx39Ң"mP?$j*CT*)M[JRTQDI)r���^9;L śXzjJT74mBCtvN6/VzZ X^]^v.(uB(W:qT+Qؿ\ط\h;x,C0&k'WwڹtBF㦩Fo>Z|~bqkK쪹ፓ&[WۉW al۞:(>Pzb,6n}TsX;nUm-h_N7>Ӽax.z+<>>ysEE]\}xkV&w>BںV-szxV-X$·6ڣ!h˫[.XgWwV;#>!qQ5,bZ.\=z{Uo#w9Z֫WDtW7 =='_;6[ņٱ܄37.rtlE[źeыKفxG{j��Rtd4c&X!szj ϕ;:;tdˮ{H?ra̫: ,{X']K[b~avegCaq..*y0a0Bxww`dg(6ҖB/{|C!X;fڅHaPēsXr][WC'/rj47NٱrtPAx(g_9:拚Ͼ~'E|7Rv~5FC}OZR ڌJ'w-fɾZJ!DױBO':{:{jB2L蟼0rR|پ%i7k],?X<vϔ#Jډ5͙Dmނo|=<P~tm!]-k'I5LӋ`mWrB'\ӥ ÜCG8VuuL#7tT#6j(_۾zX;Or8?O㡹r77[Ur*e\jrѦn+.nMDW{o=4W||鎙Ϯr=15&{X ۗ,M#0ӵ/xi5ֿ{|x-|Iotұ< Oj|l`7NwUcz0j3#S짿zęo\-wcD~b��՜uwM>-C8US O>:.X ��f?Ze_UÓV$n-L~Pyyjܞѵ_J>]՜ V9w[,ŋM2LXRzVa+I1۽zd7{Mu%NXjzVa$iK+V"ΉmRa V\6vԙ\;k"~Z0,>c%XsI-?LD,0P&8Z&!XK`g5/5o$簳ڮBbz'0`v; oP}>`+9xL*~Bb-|&ʹ|&LlU+EUf+n|dLgDg6xX}*,????ώ ho.byd/z{aXg֖B/l&BbdO-o~T,vp"<Qr<E'n{?'ؽm+`Ʌmj[xb_I,��znPFvVh5 Q^j.-GW^%`fK-X嶸wq0P[KbbXA@#o enΣnޱXf/_r5&K/n}@wjK|{d!XdJRxf<Δc-?8bщ[O8^G'/XcyD,;Vg͕OV,^'>g6bScT7^2lz#:R';]˿?{6YÊF><✹,@,,@@,@,,@@,@2` X X`` X` X X`` X` X` X X`` X` X X`` X` X` X X`` X` X X``AG}>*urIENDB`
[異常]
const promiseTxt = convertFileToText(file); promiseTxt.then(function (data) { txt = data;//このtxtを最終的にサーバーに送る }) function convertFileToText(file) { return new Promise((res, rej) => { const reader = new FileReader() reader.onload = ((e) => { res(reader.result) }) reader.readAsText(file) }) } //サーバーに送るデータ, fileオブジェクトの作成 const file = new File([txt], ...(後は省略)
サーバー側で正常に保存されるが、中身が下記の通り(�の記号が多いように見える)
�PNG IHDR��ݡ�tEXtSoftwareAdobe ImageReadyq�e<#iTXtXML:com.adobe.xmp<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 6.0-c002 79.164352, 2020/01/30-15:50:38 "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmp:CreatorTool="Adobe Photoshop 21.1 (Windows)" xmpMM:InstanceID="xmp.iid:F66AE3CEAF0311EAA82AEE1161ABBC23" xmpMM:DocumentID="xmp.did:F66AE3CFAF0311EAA82AEE1161ABBC23"> <xmpMM:DerivedFrom stRef:instanceID="xmp.iid:F66AE3CCAF0311EAA82AEE1161ABBC23" stRef:documentID="xmp.did:F66AE3CDAF0311EAA82AEE1161ABBC23"/> </rdf:Description> </rdf:RDF> </x:xmpmeta> <?xpacket end="r"?>Ğ5��IDATx�������a����������ؘ����39�Ң�"m��P�?$j�*C�T���*)M[�JR ������hR���y�������;��\��@d X��` X� X�`�`� X��` X� X�`�`� X��`� X��` X� X�`�`� X��` X� X�`�`� X��`� X��` X� X�`�`� X��` X� X�`�`� X��`� X��` X� X�`�`� X��` X????ax�C�p6 �!X�����z�j��J�T7�4m�BC����t����v�N���6��/Vz�Z X���^]�^��v.(u��B(�W:�q����T+�Qؿ\ط\h;x,C0�&�k'�W��w�ڹt��BF�㦩Fo�>�Z|~���bq�k�K��쪹ፓ��&[Wۉ�W a�l�۞:�(>�Pzb�����,6��n�}�Ts�X;�n���Um���-�h��_���N��7��>Ӽa��x����.���z+<>��>y��s�E���E]\�}xk���V&��w>B��ں��V�-��s�zx�V-X$���·�6��ڣ��!��h��˫��[.��X��gWwV;#>!��q�Q��5�,b�Z��.\�=z{Uo#��w��9�Z�֫�W�D�ś�t�����W�7 ==����'�_;6���[�ņ��ٱ��܄��37.��rtl�E[�ź�e��ы�Kف�x�G�{j���Rt�d4��c��&�X�!���s�z������j �ϕ��;��:��W;�td�ˮ{H����?ra���̫�: 7��,{X�'���]K��[�b��~aveg���C��aq..*���y��0a�����0�B�xw��w�`��d�g(6ҖB/{|C!X��;f���څH�a���PēsX�r���][W�C�����'�/���r�j4�7�N��ٱr�t�P�Ax�(g_9:拚��Ͼ��~����'�E|�7�Rv����~�5F�C�}�O�ZR� � �ڌJ��'w-f�����ɾ�Z��J!�D��ױB����O��'���:{�:{j�B���2L蟼0�r�R��|�پ�%i7�k�],?�X<�v�����ϔ�#��J�ډ�5͙D������mނ���o����|��=�<�P~�t���m!�����]��-��k'�I�5L�Ӌ�����`m���Wr��B'��\��ӥ� �Ü��CG�8V�u�u�L#7��� ��tT#6j����(��_۾z�X;�Or������8?�������O㡹�r77[�Ur���*e��\j�rѦn+�.��n��MDW{�o��=4W�����|���|鎙��Ϯ�r�=1������5�&{X �ۗ,M��#��0��ӵ/�xi5ֿ{|x-��|��Io�tұ<� Oj��|�l����`7N�wUcz0�j3��#��S�짿z��ę�o�\�-wc��D��~b�����՜u�wM�>�-����C��8U���S����� O>�����:�.X ���f?�Z�e����_����U��Ó�V$n�-L��~�P�y���y�jܞ�ѵ��_���J>����������]�՜� V��9���w�[,�ŋ��M2��LX��R�zVa�����+I���1۽zd��7�{�Mu�%�NX��j�zVa���$�iK+V�"�Ή���m���Ra�� �V�\6�v�ԙ�\;k"~Z�0,�>��c�%X�sI-���?L�D�,��0,��P�`�&�a8Z��&!X�K��`g5������/�5���o�$�簳ڮ��B�b��z'���0�`�*~�B�b��-�|&�ʹ��|���&�L�l�U+��E�U���f��+�n����|d�LgDg6�xX}`����*��,????ώ� �ho.��byd/�z{aX��g֖B/l&B�bdO-�o�~�T�,�vp"�<���Q�r�<���E��'��n��{?�'�ؽ��m+�`�Ʌ�m���j�[x���b�_I�,���znP�FvV�h���5�� Q���^�j.���-G��W�^%`�fK�-X�嶸�wq0P[K�bb��X�A�@#o �F�nt_�)�L�`��X>���Z����0Pa�"�H�����F�-��r�U2���,��I�����t[��1\n$���T��Úk�=C2���P�b�ݛ�r��%c�J��+.#��Kݡ!!Õq�j���\:��Zӗ��ʦ}�+X����*H�p�K�h�i.�,�@�,�8{�O�`���A@�H��ՎA�!!�` X� X�`�`� X��` X� X���e���nΣ�n���ޱ�X�����f�/_�r��5�&K����/����n�}@���wj�K���|{�d!X�d�J��Rxf�<�Δ��c���-��?8��bщ[��O8�^G'��/��X�c�y�D�,�;V��g�͕O�V�,^'���>g6b�S����c���T�7^�2�lz�#:��R';��]˿��?��{�6Y�Ê����F><��✹�,�@�,�,@�@��,�@�,�,@�@��,�@��2�` X� X�`�`� X��` X� X�`�`� X��` X��` X� X�`�`� X��` X� X�`�`� X��` X��` X� X�`�`� X��` X� X�`�`��A�G�}�>�*urIEND�B`�
fileReader::readAsText()を使用して、正常のパターンのようなデータを取得するのが不明で質問させていただきました。
追記1
1,arrayBufferを読み取り → 2,文字列としてdata属性に保存 → 3,サーバーにデータ送る時bufferArrayに戻す
1, function convertFileToText(file) { return new Promise((res, rej) => { const reader = new FileReader() reader.onload = ((e) => { res(e.target.result) }) reader.readAsArrayBuffer(file) }) } 2, const promise = convertFileToText(file); promise.then(function (arrayBuffer) { // array buffer to JSON (これをdata属性に保存) const dataString = JSON.stringify(Array.from(new Uint8Array(arrayBuffer))); }) 3, // JSON to ArrayBuffer const arrBuffer = new Uint8Array(JSON.parse(*data属性から取得)).buffer
ここで「Uncaught SyntaxError: Unexpected token , in JSON at position 3」のエラー
最初の質問とはずれるかもしれませんが、もし何か分かりましたらご回答いただけると助かります、よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/03 22:27
2020/07/03 22:36
2020/07/03 22:57
2020/07/04 06:37
2020/07/04 06:42
2020/07/04 08:34
2020/07/04 09:10
2020/07/04 09:20
2020/07/04 09:23
2020/07/04 17:45
2020/07/04 22:02