前端Typescript上传/下载文件

本文记一下如何用typescript写的前端来上传/下载文件。

上传

上传通常用一个file类型的input来实现，再typescript中我们可以模拟这样一个dom：

function loadFileCommand(): void => {
    const input = document.createElement('input');
    input.type = 'file';
    input.onchange = _this => {
        const fileArray = input.files;
        // 这里注意默认多选文件，返回的是一个File类型的array
    };
    input.click();
  });

下载

下载同样可以用dom的方式实现，需要选择文件类型，参考：
https://developer.mozilla.org/en-US/docs/Web/API/Blob/type：

downloadFile(data: Response) {
  const blob = new Blob([data], { type: 'text/csv' });
  const url= window.URL.createObjectURL(blob);
  window.open(url);
}

也可以用下面一个库saveAs：

npm install file-saver --save
npm install -D @types/file-saver

// 下载一个二进制文件
const dataArray = new Uint8Array(data);
const dataBlob = new Blob([dataArray.buffer], {type: 'application/octet-stream'});
FileSaver.saveAs(dataBlob, 'hlp.bin');