encodeURI在二进制字符串上处理数据
encodeURIComponent data mangling on binary string
我正在使用jQuery ajax get请求读取二进制文件文件,其中我以字符串的形式接收文件(在我的例子中是zip文件)。一旦我在浏览器中对文件执行了一些操作(而不是修改文件),我需要通过 ajax 将其传输回服务器端点(在本例中,使用 express 3 的 nodejs)。我正在尝试通过以下 POST 请求执行此操作,这是我认为我遇到问题的地方,因为需要使用 encodeURIComponent 对我的字符串进行编码:
var fd = new FormData();
fd.append("filedata", encodeURIComponent(data), "filedata"); // data is my binary string
fd.append("filename", $('#url-input').val().split('/').slice(-1)[0]);
$.ajax({
type: "POST",
url: 'endpoint',
data: fd,
processData: false,
contentType: false,
success: function() {
alert('save successful');
}
});
端点包含以下代码,其中将数据作为缓冲区存储在 mongodb 中:
app.post('/endpoint', function(req, res) {
var newData = {};
newData.file = new Mongo.Binary(new Buffer(decodeURIComponent(req.body.filedata), "binary"));
newData.name = req.body.filename;
newData.date = moment().format('MMMM Do YYYY, h:mm:ss a');
database.insert(newData, {safe: true}, function() { console.log('inserted new data'); });
});
这似乎都按计划工作,但是,当我稍后检索文件时,它略有混乱。当我在十六进制编辑器中将其与原始值进行比较时,该值很接近但不精确,以下是两个文件部分的示例:
原始文件:
01 02 54 03 08 5D 08 5D 66 18 61 66 19 1B 67 1C 03 66 01 02 7A 85 14 80 7E 7F 81 82 85 85 80 80 85 5D 80 5D 14 80 14 80 89 8A 81 82 80 80 80 80 80 5D 80 5D 67 66 03 03 6D 6C 11 64 01 02 2E 37 57 85 57 80 85 57 80 57 57 8C 54 85 8C 8C 85 85 80 57 80 57 7A 80 14 80 8C 57 85 57 1A 8C 57 85 57 8C 57 85 18 1B 6D 1C 3E 30 15 57 37 37 6C 66 54 24 57 34 15 57 15 2E 01 2E 02 57 37 54 2C 2D 76 2E 74 77 68 6B 68 68 71 71 74 74 A7 A7 A7 A7 19 19 66 71 19 1A 08 08 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 DD DE 10 EE 6D 8B 7C 01 69 6A 6A 5C 10 21 7C 60 56 CC EE 02 1C 01 BE 8C 8D 8D 8D 44 AC AE 01
来自已发布文件的相应字符串,请注意它仅略有不同:
01 02 54 03 08 5D 08 5D 66 18 61 66 19 1B 67 1C 03 66 01 02 7A FD 14 FD 7E 7F FD FD FD FD FD FD FD 5D FD 5D 14 FD 14 FD FD FD FD FD FD FD FD FD FD 5D FD 5D 67 66 03 03 6D 6C 11 64 01 02 2E 37 57 FD 57 FD FD 57 FD 57 57 FD 54 FD FD FD FD FD FD 57 FD 57 7A FD 14 FD FD 57 FD 57 1A FD 57 FD 57 FD 57 FD 18 1B 6D 1C 3E 30 15 57 37 37 6C 66 54 24 57 34 15 57 15 2E 01 2E 02 57 37 54 2C 2D 76 2E 74 77 68 6B 68 68 71 71 74 74 FD FD FD FD 19 19 66 71 19 1A 08 08 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00
我应该注意的是,我已经尝试在我的代码中使用其他函数,例如客户端上的 btoa 和服务器上的 atob(带有模块),但所有这些都需要使用 encodeURIComponent,我相信这是篡改数据。我还能够通过稍微不同的路线和传统的表单帖子将二进制数据存储在我的 mongodb 中。
还有其他人遇到过这个问题吗?
在关于我原始问题的一条评论中,有人提到我应该尝试使用 blob 代替。我只是按如下方式重新设计了代码,删除了jQuery的使用并使用了blob:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'endpoint for original binary file', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
var data = this.response; // this is a blob
var reader = new FileReader();
reader.onload = function() {
var dataUrl = reader.result;
var base64 = dataUrl.split(',')[1];
var fd = new FormData();
fd.append("filedata", base64, "filedata");
fd.append("filename", $('#url-input').val().split('/').slice(-1)[0]);
var request = new XMLHttpRequest();
request.open("POST", "endpoint");
request.onload = function (e) {
if (this.status === 200) {
alert('sent');
}
};
request.send(fd);
};
reader.readAsDataURL(data);
}
并且相关的服务器代码基本相同,除了
newData.file = new Mongo.Binary(new Buffer(decodeURIComponent(req.body.filedata), "binary"));
成为:
newData.file = new Mongo.Binary(new Buffer(req.body.filedata, "base64"));
感谢您的问题,绝对有助于引导我找到正确答案。
相关文章:
- AJAX调用后使用JavaScript处理数据(CakePHP 2.6.x)
- 如何处理数据视图中项目的鼠标点击
- 为什么我们需要为POST定义res.on('data'..,即使我们不处理数据
- 如何处理数据-Windows 8应用程序
- 替换不处理数据属性值
- 在 Javascript/Phonegap 上处理数据集
- 在这种情况下如何处理数据驱动的输入
- 微风/棱角:如何处理数据
- WebRTC是否为您处理数据包丢失和数据包接收确认等,或者您是否需要为此编写自己的解决方案
- 如何将多行输出传输到另一个 php 文件以处理数据
- encodeURI在二进制字符串上处理数据
- 在 Emscripten'd C++ 程序中处理数据后,如何修复尝试从 Web worker 发回数据时的“内存不足”错
- 防止 WebSQL 数据库中的 SQL 注入?(如何处理数据中的报价?
- 是否有任何方法可以查明localForage/indexedDb是否正在处理数据
- 如何使用AngularJS处理数据的递归呈现
- 使用array.map或array.filter处理数据
- 使用javascript处理数据,并使用Angular.JS以HTML显示
- 使用JSTL处理数据
- Opencpu不能处理数据.表在R
- 我如何处理数据过滤上的一个按钮点击D3.js