javascript - 连接 b64 字符串仅适用于小图片

Question

我正在处理一些通过将图片拆分成块来上传图片的代码。

           $('#image-file').on('change',function(){
                    if (this.files && this.files[0]) {
                        var file = this.files[0];
                        var fileSize   = file.size;
                        var chunkSize  = 64 * 1024; // bytes
                        var offset     = 0;
                        var self       = this; // we need a reference to the current object
                        var chunkReaderBlock = null;
                        var allImgData = "";

                        var readEventHandler = function(e) {
                            if (e.target.error == null) {
                                offset += chunkSize;

                                imgData = e.target.result.split(",");
                                imgData = imgData[1];

                                console.log(imgData);

                                allImgData += atob(imgData);


                            } else {
                                console.log("Read error: " + e.target.error);
                                return;
                            }

                            if (offset >= fileSize) {

                                var formData = {
                                    'name'              : localStorage.getItem('email'),
                                    'image'             : btoa(allImgData)
                                };


                                 $.ajax({
                                     type   : 'POST',
                                     url    : '/uploadprofile.php',
                                     data   : formData,
                                     dataType: 'json',
                                     encode : true
                                }).done(function(data) {
                                      console.log(data);
                                });
                                return;
                            }

                            // of to the next chunk
                            chunkReaderBlock(offset, chunkSize, file);
                        }

                        chunkReaderBlock = function(_offset, length, _file) {
                            var r = new FileReader();
                            var blob = _file.slice(_offset, length + _offset);
                            r.onload = readEventHandler;
                            r.readAsDataURL(blob);
                        }

                        // now let's start the read with the first block
                        chunkReaderBlock(offset, chunkSize, file);


                    }
                });    

只要块的数量相对较少，此代码就可以工作，即小图片可以正常上传，但较大的图片会出错。我发现由于某种原因，我使用的 PHP 文件大约 2MB 返回 POST http://tanglecollege.com/uploadprofile.php 406（不可接受）。我知道我的 php.ini 的 POST 限制约为 256MB，所以这不是问题。我确保使用 atob 连接块，并删除描述 b64 字符串的初始数据。当我将它发送到 PHP 文件时，我使用 btoa 以将其返回为二进制字符串形式。我的 PHP 文件返回错误 POST http://tanglecollege.com/uploadprofile.php406（不可接受），即使我所做的只是读取数据。为什么分块的大图即使是分块的小图也上传不了？

标签： javascriptphp