服务器在从客户端发出文件时接收到一个空数组

Question

我在发出上传的文件（在本例中为 jpg）时遇到问题。当服务器端从客户端接收有效负载时，当我在 console.log 服务器端运行该文件时，该文件本身只是一个 {}。有效负载中的其他所有内容看起来都是正确的。

我的代码相当长，我不希望有人浏览所有代码，但本质上我在网页上有一个文件上传按钮，它调用如下处理程序：

<input type="file" style="width:150px;" id="mapUpload" onchange="parent.uploadFileRequest(this, 'map')">

它是parent.upload，因为这个html位于iframe内部，而js位于外部。处理程序本身看起来有点像这样：

function uploadFileRequest(){
    console.log(arguments[0].files[0]);
    socket.emit('uploadFile', arguments[0].files[0]);
}

我使用参数是因为我有一个用于上传文件的处理程序，并且参数的数量根据调用位置的不同而有所不同。那里的console.log已经返回了我所期望的，

File { name: "testImage.jpg", lastModified: 1690232590473, webkitRelativePath: "", size: 47908, type: "image/jpeg" }

在服务器端，我一直使用以下内容作为快速调试：

socket.on('uploadFile', (file) => {
    console.log(file);
});

显示为 {}。最后，我在 socket.io 网站上找到了以下操作方法，这似乎表明这是可能的，但由于某种原因我无法使我的工作正常进行。 https://socket.io/how-to/upload-a-file

Answer 1

玩了一段时间后，我决定回去读取文件并发送 base64 编码的字符串。

我想避免将其转换回文件或 blob 来将其绘制到画布中，但我添加了一个小函数来在服务器将其广播到其他客户端后在客户端执行此操作。

getBlob(mapImageFile).then((mapBlob) => {
    let smallImg = new Image();
    smallImg.src = URL.createObjectURL(mapBlob);
    console.log(smallImg.src);
    smallImg.onload = function(){
        let canvas = insideView.document.getElementById(canvasId);
        let ctx = canvas.getContext('2d');
        ctx.drawImage(smallImg, 0, 0, 50, 50);
    }
});
  
async function getBlob(base64Image){
    let response = await fetch(base64Image);
    let imgBlob = await response.blob();
    return imgBlob;
}

insideView 是对 iframe 的 contentWindow 的引用，如果有人好奇的话，canvasId 是在 getBlob 调用上方的画布上生成的。本质上，一个用户上传一张图像，然后将其发布到其他客户视图中的小画布中。