如何解决 746：AJAX 帖子 formData 中的“意外令牌”

Question

我通过 AJAX 向 Ruby 发送一个文件对象，如下所示：

var files = $("#upDOCS").prop('files'),
            formData = new FormData();

            for (var i = 0; i < files.length; i++) {
              var file = files[i];
              if (!file.type==='application/pdf') {
                continue;
              }
              formData.append(file.name, file);
            }

            $.ajax({
              xhr: function () {
                            var xhr = $.ajaxSettings.xhr();
                            xhr.upload.onprogress = function (e) {
                                console.log(Math.floor(e.loaded / e.total * 100) + '%');
                            };
                            return xhr;
                        },
                url: "medcon/adddocs",
                type: "POST",
                enctype: 'multipart/form-data',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (locks) { ...

但我收到一条错误消息，提示我正在发送一个以破折号开头的意外令牌 ----- 在我看来，我已经获得了 pdf 文件对象，因为该错误还包括 PDF 数据：

    746: unexpected token at '------WebKitFormBoundarybp8j3mTAsTL4JrAq
Content-Disposition: form-data; name="test.pdf"; filename="test.pdf"
Content-Type: application/pdf

%PDF-1.4
%����
1 0 obj
<</Creator (Mozilla/5.0 \(Windows NT 10.0; Win64; x64\) AppleWebKit/537.36 \(KHTML, like Gecko\) Chrome/70.0.3538.110 Safari/537.36)
/Producer (Skia/PDF m70)
/CreationDate (D:20181130205113+00'00')
/ModDate (D:20181130205113+00'00')>>
endobj
2 0 obj
<</Type /XObject
/Subtype /Image
/Width 17
/Height 17
/ColorSpace /DeviceRGB
/SMask 3 0 R
/BitsPerComponent 8
/Filter /FlateDecode
/Length 144>> stream
x���I� ��S�7�M�'9eʈ���'�i3�1�d;��ӫ��9�;�h��X�����8��uV????�p����b�?���4ӵ�/����0䵍�����Z+?P���(C���@gjޏ~�f������?v��N
endstream
endobj
3 0 obj
<</Type /XObject
/Subtype /Image
/Width 17
/Height 17
/ColorSpace /DeviceGray
/BitsPerComponent 8
/Filter /FlateDecode
/Length 121>> stream
x�c`'

我哪里错了？我引入了哪些非法令牌或遗漏了哪些格式？

Answer 1

我发现我们不需要整个表单对象来将文件上传到服务器。我们只需要 base64 字符。为了获得这些，我必须使用 onload 事件，这意味着 AJAX 必须是同步的而不是异步的；也就是说，AJAX 必须在 onload 事件触发器内。这对我有用：

function _docs_submit() {
          event.preventDefault();
          upDOCS_btn.html("Uploading...");

            var fileReader = new FileReader(),
                base64;                    

            // Define file reader function to read the file content and convert to base64
            fileReader.onload = function(file) {
                base64 = file.target.result;

                data["file_base64"] = base64.split(/,/)[1];

                /* Ajax - has to go in the onload event because this has to be synchronous*/
            $.ajax({
              xhr: function () {
                            var xhr = $.ajaxSettings.xhr();
                            xhr.upload.onprogress = function (e) {
                                console.log(Math.floor(e.loaded / e.total * 100) + '%');
                            };
                            return xhr;
                        },
                url: "medcon/adddocs",
                type: "POST",
                enctype: 'multipart/form-data',
                dataType: "json",  
                data: JSON.stringify(data),
                cache: false,
                contentType: false,
                processData: false,
                success: function (locks) {
                  alert('Thank you.\nDocument(s) received.');
                  //$('#gscForm')[0].reset();
                  self.element.remove();
                  $("#medcon-3").empty();
                  $("#medcon-3").append($('<div id="medcon">').medconlist());
                  $("#medcon-2").empty();
                  $("#medcon-2").append($('<div id="medcon">').medcon());
                  $("#medcon-1").empty();
                  //$("#medcon-1").append($('<div id="medconoverview">').medcongsc());
                  $("#medcons").tabs('select', '#medcon-1');
                },
                error: function(e) {
                        alert("There was an error submitting your documents:\n" + e.responseText);
                        console.log(e.responseText);
                      }
              });

            };

            var file = $("#upDOCS").prop('files')[0],
                data = {
                  "filename":file.name,
                  "filetype":file.type,
                  "filesize":file.size
                }

                fileReader.readAsDataURL(file);
        }