vue文件上传下载

upload() {
    const a = document.createElement("input");
    a.style.display = "none";
    a.type = "file";
    a.accept = ".xlsx";
    a.onchange = (e) => {
      this.handleImport(e);
    };
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }


async handleImport(e) {
    //此处取第一个文件，input得到的可以是一个文件数组
    const params = e.srcElement.files[0];
    const formData = new FormData();
    formData.append("file", params);
    //调用上传接口
    const res = await uploadFile(formData)
  }

以上文件上传，大文件上传可使用resumablejsresumable.js大文件切片上传_前端小白聆听的博客-CSDN博客

async function download(){
    //如调用接口后端返回的是文件流，则在请求函数中添加配置responseType: 'blob'
    //将返回的blob生成临时url即可
    const { data } = await exportFile()
    const url = window.URL.createObjectURL(data)
    
    //如果后端接口直接下载，则将url改成接口地址即可
    const a = document.createElement("a")
    a.href = url //"下载文件的地址"
    a.style.display = "none"
    a.download
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
}

文件下载任何事件触发函数就可以了

使用xlsx导出文件xlsx前端表格下载_聆听+自律的博客-CSDN博客