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

文件下载

利用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 () {
   
             
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
文件上传下载是 Web 开发中常用的功能之一,Vue.js 作为前端框架,可以很方便地实现这些功能。下面是一个简单的示例: ## 文件上传 首先,我们需要在 Vue 组件中定义一个表单,让用户可以选择要上传的文件: ```html <template> <div> <form> <input type="file" @change="handleFileUpload"/> <button type="button" @click="uploadFile">上传</button> </form> </div> </template> ``` 在 `input` 标签中,我们绑定了 `@change` 事件,当用户选择文件时,会触发该事件,调用 `handleFileUpload` 方法。在 `button` 标签中,我们绑定了 `@click` 事件,当用户点击“上传”按钮时,会触发该事件,调用 `uploadFile` 方法。 接着,在 Vue 组件中定义 `handleFileUpload` 方法,将上传的文件保存在组件的 `file` 属性中: ```js <script> export default { data() { return { file: null }; }, methods: { handleFileUpload(event) { this.file = event.target.files[0]; }, uploadFile() { const formData = new FormData(); formData.append('file', this.file); // 发送请求上传文件 } } }; </script> ``` 在 `handleFileUpload` 方法中,我们通过 `event.target.files[0]` 获取到用户选择的文件,然后将其保存在组件的 `file` 属性中。在 `uploadFile` 方法中,我们使用 `FormData` 对象创建一个表单,并将 `file` 属性添加到表单中,然后发送请求上传文件。 ## 文件下载 文件下载通常需要在后端实现前端只需要提供一个下载链接,当用户点击这个链接时,后端会将文件发送给用户。在 Vue 组件中,我们可以使用 `a` 标签来定义下载链接: ```html <template> <div> <a :href="downloadUrl" download>下载</a> </div> </template> ``` 在 `a` 标签中,我们绑定了 `:href` 属性,将其值设置为一个计算属性 `downloadUrl`,同时添加了 `download` 属性,表示下载链接。接着,在 Vue 组件中定义 `downloadUrl` 计算属性: ```js <script> export default { computed: { downloadUrl() { return '/api/download/' + this.filename; } } }; </script> ``` 在 `downloadUrl` 计算属性中,我们返回一个下载链接,其中 `filename` 是要下载的文件名。这个链接应该与后端实现下载接口对应。 以上就是使用 Vue 实现文件上传下载功能的示例。需要注意的是,这只是一个简单的示例,实际应用中还需要考虑更多的细节,例如文件类型、文件大小、上传进度等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值