前端文件上传和下载功能的实现

最新推荐文章于 2025-09-29 08:19:56 发布

原创

最新推荐文章于 2025-09-29 08:19:56 发布 · 2.1k 阅读

标签

#前端

收录于

本文详细介绍了前端如何实现文件下载和上传。在文件下载方面，讲解了利用a链接、window.open()和axios处理鉴权的情况。在文件上传部分，提到了使用input标签的type=file特性。同时讨论了后端存储图片的方式，以及axios中处理文件下载的Header参数Content-Type和Content-Disposition的应用。

文章目录

文件下载
文件上传
- 利用input标签设置 type="file"

文件下载

利用a链接下载文件

let aLink = document.createElement('a')
            aLink.href = `xxxx下载地址`// 设置下载的图片链接
            aLink.click()// 触发点击事件

使用window.open()

**
window.location对象获取当前页面的地址信息，如果项目上线地址肯定不可以写死吧

window.open(
                window.location.origin +
                    'xxxxxxxxxx' +
                    params,
                '_self'
            )

如果项目需要通过header鉴权,要设置header什么的

var xhr = new XMLHttpRequest();
            let url = 'xxxxx'
            xhr.open("get", url, true);
            //加请求头
            let userId = JSON.parse(getStore('user')).userId
			xhr.setRequestHeader("user",userId);
            xhr.responseType = "blob"; // 返回类型blob  blob 存储着大量的二进制数据
            xhr.onload = function () {