前端文件上传、下载-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端文件上传、下载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、文件上传

import { importData } from '@/api.js';

async importFn() {
    // 文件数据
    let file = null; 

    // 文件使用form-data格式，参数使用json格式
    let formData = new FormData();
    formData.append("excel", file);
    formData.append("excelQuery", new Blob([JSON.stringify({name: '文件名'})], { type: 'application/json' }));
    
    // 调用接口需要定义headers
    let res = await importData(formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    });
}

传到接口的参数使用json格式，不然接口可能报415状态码错误

二、文件下载文章来源地址https://www.toymoban.com/news/detail-622082.html

import { exportData } from '@/api.js';

async exportFn() {
   try {
        let res = await exportData({keyword: ''}, {
            headers: {
                'responseType': 'blob',
                'Content-Type': 'application/json;application/octet-stream',
                'dataType': 'json'
            }        
        });
        let reader = new FileReader();
        reader.onload = (e) => {
            let content = reader.result;
            // 读取内容判断是返回的json 还是 文件数据
            if (content && content.indexOf('"code":') > -1) {
                let data = JSON.parse(content);
                console.error(data.msg);
            } else {
                this.exportZip(res, `${this.getTimeStr()}.zip`);
            }
        };
        reader.readAsText(res);
   } catch (err) {
        console.error(err);
   } finally {
   }
},
// 下载zip
exportZip(data, name) {
   let blob = new Blob([data], { type: 'application/zip' });
   let downloadElement = document.createElement('a');
   let href = window.URL.createObjectURL(blob); //创建下载的链接
   downloadElement.href = href;
   downloadElement.download = name; //定义文件名
   document.body.appendChild(downloadElement);
   downloadElement.click(); //点击下载
   document.body.removeChild(downloadElement); //下载完成移除元素
   window.URL.revokeObjectURL(href); //释放掉blob对象
},
// 获取时间作为文件名
getTimeStr() {
   const now = new Date();
   const year = now.getFullYear();
   const month = ('0' + (now.getMonth() + 1)).slice(-2);
   const day = ('0' + now.getDate()).slice(-2);
   const hours = ('0' + now.getHours()).slice(-2);
   const minutes = ('0' + now.getMinutes()).slice(-2);
   const seconds = ('0' + now.getSeconds()).slice(-2);
   const formattedTime = year + month + day + hours + minutes + seconds;
   return formattedTime;
},

到了这里，关于前端文件上传、下载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！