我需要使用鳄梨酱公共js库通过websocket将数据(一个文件(发送到我的鳄梨酱后端。
场景如下:
- 创建拖放区域
- 用户在此区域中放置文件
- 文件已读取
- 将创建一个guac文件流,并将该文件发送到guac后端
步骤1到3已经开始工作,但我不知道如何将文件发送到鳄梨酱后端。
当文件被丢弃时,这是我的函数:(guac是初始化Guacamole客户端函数的全局var(
function drop(ev){
ev.preventDefault();
if (ev.dataTransfer.items) {
for (var i = 0; i < ev.dataTransfer.items.length; i++) {
if (ev.dataTransfer.items[i].kind === 'file') {
var file = ev.dataTransfer.items[i].getAsFile();
var reader = new FileReader();
reader.onloadend = function fileContentsLoaded (e){
const stream = guac.createFileStream(file.type, file.name);
const bytes = new Uint8Array(reader.result);
stream.sendBlob(bytes.buffer)
stream.sendEnd()
};
console.log(file)
reader.readAsArrayBuffer(file);
}
}
} else {
for (var i = 0; i < ev.dataTransfer.files.length; i++) {
console.log(ev.dataTransfer.files[i].name);
}
}
}
后端也在接收数据,我可以在guacd将文件发送到的远程服务器上打开文件,但该文件只包含某种二进制数据。
有人已经处理好了吗?或者知道我如何发送数据吗?
如果在后端使用Node.js,请尝试使用Buffer.toString
或Buffer.from
进行处理。
我已经找到了一个解决方案。。。
guacamole公共js-lib已经提供了一个将缓冲区发送到后端的函数。。。
我的"drop";函数现在看起来如下:
function drop(ev){
ev.preventDefault();
if (ev.dataTransfer.items) {
for (var i = 0; i < ev.dataTransfer.items.length; i++) {
if (ev.dataTransfer.items[i].kind === 'file') {
var file = ev.dataTransfer.items[i].getAsFile();
var reader = new FileReader();
reader.onloadend = function fileContentsLoaded (e){
const stream = guac.createFileStream(file.type, file.name);
var bufferWriter = new Guacamole.ArrayBufferWriter(stream)
bufferWriter.sendData(reader.result)
bufferWriter.sendEnd()
};
reader.readAsArrayBuffer(file);
}
}
} else {
for (var i = 0; i < ev.dataTransfer.files.length; i++) {
console.log(ev.dataTransfer.files[i].name);
}
}
}