axios 上传（上传既包括二进制文件，又包括json数据）、下载（下载流数据另存为数据，流数据转换为json）

最新推荐文章于 2024-10-23 16:29:07 发布

原创最新推荐文章于 2024-10-23 16:29:07 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了使用axios进行文件上传，包括二进制文件和json数据的组合上传，以及文件下载，特别是如何将流数据转化为Excel并下载，同时讲解了如何处理包含json的流数据并转换为json。

下载axios配置

function downloadPolicy(data) {
    return request({
        url: '/api/invo/goods/downloadPolicy',
        method: 'post',
        data,
        responseType: 'blob'
    });
}

流数据转换为excel文件并下载到本地

             downloadPolicy(data).then(res => {
    
                        // new Blob([data])用来创建URL的file对象或者blob对象
                        const url = window.URL.createObjectURL(new Blob([res]));
                        // 生成一个a标签
                        const link = document.createElement("a");
                        link.style.display = "none";
                        link.href = url;
                        link.download = "待批量开具清单.xlsx";
                        document.body.appendChild(link);
                        link.click();
              
                }).catch(() => {
                    this.$loading.hide();
                });

包含json数据的流转换为json

                        var reader = new FileReader();
                        console.log('reader', reader);
                        reader.readAsText(res, 'utf-8');
                        reader.onload = () => {
                            const parseData = JSON.parse(reader.result);
                            console.log('parse', parseData);
                            if (parseData.status === -1) {
                                this.$message.error(parseData.statusText);
                            }
                        };

上传axios配置

function uploadBatchPolicy(data) {
    return request({
        url: '/api/invo/invoice/uploadBatchPolicy',
        method: 'post',
        data,
        headers: { "Content-Type": "multipart/form-data" }
    });
}

上传（添加文件二进制数据和json数据）

            const formData = new FormData();
            // 通过append向form对象添加数据
            formData.append("file", rawFile);
            formData.append("name", 'wfz');
            this.$loading.show();
            uploadBatchPolicy(formData).then(res => {
                this.$loading.hide();
                if (res.status === 0) {
                    this.$message.success('上传成功！');
                    this.uuid = res.data.uuid;
                    this.searchForm.policyNoFileLineNum = res.data.policyCount;
                } else {
                    this.$message.error(res.statusText);
                }
            }).catch(() => {
                this.$loading.hide();
            });