vue FormData上传文件并下载

jxt_228

已于 2022-06-29 14:43:35 修改

阅读量332

点赞数

分类专栏： vue 文章标签： javascript 前端 vue.js

于 2022-06-29 14:22:49 首次发布

本文链接：https://blog.csdn.net/qq_36738092/article/details/125521138

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用Vue.js和axios处理文件上传，并通过创建Blob对象实现在前端直接下载。关键步骤包括：监听input文件选择事件，使用FormData构造上传数据，设置axios请求头为'Content-Type': 'multipart/form-data'，响应类型为'blob'，然后将返回的blob数据转换为下载链接，最后创建并触发下载。

摘要由CSDN通过智能技术生成

vue FormData上传文件并下载

后端需要配合测试上传文件返回，就临时写了一个上传文件和下载

// html 代码
<input type="file" @change="onChange($event)">

// js 代码
    onChange(event){
        console.log(event)
        const params = new FormData(); // 声明formData数据类型
        params.append('file', event.target.files[0]);
        console.log(params.get('file'));	//查看上传文件
        axios({
            url: '/app/excel/orderConsignment',
            method: 'post',
            data: params,
            headers: {'Content-Type': 'multipart/form-data'},
            responseType: 'blob'	//重点
        }).then(res=>  {
           
            const blor = new Blob([res.data],{type:'application/octet-stream'});
           	const bloburl = URL.createObjectURL(blor);
            let link = document.createElement("a");
                link.href = bloburl;
                link.text = "下载";
                link.setAttribute('download', 'excel.xlsx')//excel.xlsx这个可以改，名和格式都可改
                document.body.appendChild(link);
                link.click(); //点击下载
                document.body.removeChild(link); //下载完成移除元素
                window.URL.revokeObjectURL(bloburl);  //释放blob对象
        }).catch(err=> {
            console.log(err)
        })
    },