使用JavaScript文件构造函数将相关文件传入函数

Question

我正试图将相对文件地址加载到以前由文件读取器使用的函数中。在网站上，我有一个按钮，可以让你选择本地文件加载到图形渲染器。我想用url来相对地访问这些文件，但我无法弄清楚如何将它们绑定到一个文件对象。我一直在使用this mozilla文档来试图弄明白。

这里是最初使用的代码：

// function that takes file input and renders the image 
function readFiles(){ 
    // Deal with file input 
    if (window.File && window.FileReader && window.FileList && window.Blob) { 
    var file1 = document.getElementById('fileinput').files[0]; 
    var file2 = document.getElementById('fileinput').files[1]; 

    // Call the file analyzer 
    fileAnalyzer(file1, file2); 

    } else { 
    alert('The File APIs are not fully supported by your browser.'); 
    } 
} 

这里是我想更新代码：

// load cube button 
    var loadcube = document.getElementById('loadcube'); 
    loadcube.onclick = function(evt) { 
    var file1 = new File([], "Object files/cube3.coor"); 
    var file2 = new File([], "Object files/cube3.poly"); 
    fileAnalyzer(file1, file2); 
    } 

Answer 1

可以使用Fetch API异步获取资源，将它们转换到Blob，然后像这样构建File：

function fetchAsFile(path) { 
    return fetch(path).then(function (response) { 
    return response.blob() 
    }).then(function (blob) { 
    return new File([blob], path) 
    }) 
} 

var loadcube = document.getElementById('loadcube') 

loadcube.addEventlistener('click', function() { 
    var p1 = fetchAsFile('Object files/cube3.coor') 
    var p2 = fetchAsFile('Object files/cube3.poly') 

    Promise.all([p1, p2]).then(function (files) { 
    fileAnalyzer(files[0], files[1]) 
    }) 
}) 

使用ES2017 async/await，可以简化上述这样的：

async function fetchAsFile(path) { 
    let response = await fetch(path) 
    let blob = await response.blob() 

    return new File([blob], path) 
} 

var loadcube = document.getElementById('loadcube') 

loadcube.addEventlistener('click', async function() { 
    let p1 = fetchAsFile('Object files/cube3.coor') 
    let p2 = fetchAsFile('Object files/cube3.poly') 

    let files = await Promise.all([p1, p2]) 

    fileAnalyzer(files[0], files[1]) 
})