在 JavaScript FileReader API 中传递现有服务器文件

Question

这是读取和显示STL文件功能的一部分。如您所见，它将用户使用文件输入上传的文件传递给 openFile，后者使用 FileReader API.

读取文件

window.addEventListener("load", function () {

    ...
    ...

    // file load
    var openFile = function (file) {
        console.log(file);
        var reader = new FileReader();
        reader.addEventListener("load", function (ev) {
            var buffer = ev.target.result;
            var geom = loadStl(buffer);
            scene.remove(obj);
            obj = new THREE.Mesh(geom, mat);
            scene.add(obj);
        }, false);
        reader.readAsArrayBuffer(file);
    };

    // file input button
    var input = document.getElementById("file");
    input.addEventListener("change", function (ev) {
        var file = ev.target.files[0];
        openFile(file);
    }, false);


}, false);

但我想将文件传递给存在于我的服务器上的 openFile。

我试过使用：

var file = new File ("myfile.stl");
openFile(file);

但是没用。

Answer 1

你想要的一开始在概念上是错误的。

在您的用例中，所有文件读取行为都发生在您的本地计算机（浏览器）中。如您所见，在处理任何远程端点信息之前，FileReader api 加载您的本地文件并将其表示在缓冲区中。（即您的本地内存）

而您想要的是在本地 JavaScript 代码中操作远程文件，而无需任何网络设置！

要么先加载远程文件，然后在本地使用FileReader api，要么在服务器程序上进行文件操作，然后return将结果发送到浏览器。

看看File API。

有one use case of File API看起来与您的需求相似，但实际上是不同的情况。

Answer 2

解决方法如下：

window.addEventListener("load", function () {

        ...
        ...

        var openFile = function(file) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', file, true);
            xhr.responseType = 'arraybuffer';

            xhr.onload = function(e) {
                var buffer = this.response;
                var geom = loadStl(buffer);
                scene.remove(obj);
                obj = new THREE.Mesh(geom, mat);
                scene.add(obj);
            };

            xhr.send();
        };

        openFile('filename');

    }, false);

在 JavaScript FileReader API 中传递现有服务器文件

Passing existing server file in JavaScript FileReader API

javascript

file

filereader