JavaScript FileReader API에 기존 서버 파일 전달

Question

STL 파일을 읽고 표시하는 기능 중 하나입니다. 파일 입력을 사용하여 사용자가 업로드 한 파일을 받아 FileReader API를 사용하여 파일을 읽는 openFile으로 전달합니다.

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를 사용하거나 서버 프로그램에서 파일 작업을 수행 한 다음 브라우저에 결과를 반환하십시오.

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);