在 Web 开发中,实现文件下载和显示下载进度条是一个常见的需求。在这篇博客中,我们将介绍如何使用 .Net Core WebAPI、Axios 和 Vue 来实现文件下载和显示下载进度条的功能。
准备工作
我们首先需要搭建一个基于 .Net Core 的 WebAPI 项目作为服务端,然后使用 Axios 来发送请求并下载文件,最后使用 Vue 来显示下载进度条。
创建 .Net Core WebAPI 项目
首先,我们需要安装 .Net Core 开发环境。具体可以参考官方文档进行安装。
然后,使用以下命令创建一个新的 .Net Core WebAPI 项目:
dotnet new webapi -n FileDownloadExample
cd FileDownloadExample
添加下载文件的 API
在 Controllers
文件夹下创建一个名为 DownloadController.cs
的控制器。代码如下:
using Microsoft.AspNetCore.Mvc;
using System.IO;
namespace FileDownloadExample.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class DownloadController : ControllerBase
{
[HttpGet("{fileName}")]
public IActionResult Download(string fileName)
{
var filePath = Path.Combine(Directory.GetCurrentDirectory(), "Uploads", fileName);
if (!System.IO.File.Exists(filePath))
return NotFound();
var fs = new FileStream(filePath, FileMode.Open);
return File(fs, "application/octet-stream", fileName);
}
}
}
该代码片段创建了一个 GET 请求的控制器方法,根据传入的文件名参数,构造出文件的路径并返回给客户端。
创建 Vue 项目并安装 Axios
首先,我们需要安装 Node.js。然后,使用以下命令全局安装 Vue CLI:
npm install -g @vue/cli
使用以下命令创建一个新的 Vue 项目:
vue create file-download-example
cd file-download-example
安装完毕后,我们处于 file-download-example
目录中。接下来,我们安装 Axios:
npm install axios --save
实现下载与下载进度条
配置 WebAPI 跨域
为了方便开发和测试,我们需要在服务端添加跨域配置。在 Startup.cs
中的 ConfigureServices
方法中添加以下代码:
services.AddCors(options =>
{
options.AddPolicy("AllowAll", builder =>
{
builder.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader();
});
});
在 Configure
方法中添加以下代码:
app.UseCors("AllowAll");
更新 Vue 组件
首先,我们准备一个下载按钮用于触发下载操作。在 src/components/HelloWorld.vue
中添加以下代码:
<template>
<div class="hello">
<button @click="downloadFile">下载文件</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'HelloWorld',
methods: {
downloadFile() {
axios({
url: 'http://localhost:5000/api/download/file.txt',
method: 'GET',
responseType: 'blob',
onDownloadProgress(progressEvent) {
let percentCompleted = Math.round(progressEvent.loaded * 100 / progressEvent.total)
console.log(percentCompleted)
// 显示下载进度条的代码
}
}).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]))
const link = document.createElement('a')
link.href = url
link.setAttribute('download', 'file.txt')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
})
}
}
}
</script>
这段代码定义了一个名为 downloadFile
的方法,当点击下载按钮时会触发该方法。该方法使用 Axios 发送 GET 请求,并指定 responseType
为 blob
,表示希望响应返回二进制数据。在请求发送过程中,我们通过 onDownloadProgress
回调函数来处理下载进度条。具体的进度条显示逻辑可以根据实际需求自行编写。
运行项目
最后,我们可以运行整个项目了。首先,在 .Net Core WebAPI 项目的根目录下使用以下命令启动服务:
dotnet run
然后,在 Vue 项目的根目录下使用以下命令启动客户端:
npm run serve
打开浏览器,访问 http://localhost:8080/
,点击下载按钮即可触发下载操作,并显示下载进度条。
总结
通过以上步骤,我们成功实现了在 .Net Core WebAPI + Axios + Vue 中下载文件和显示下载进度条的功能。这种组合是非常常见且流行的,能够满足大部分文件下载的需求。希望本文对你有所帮助!
注意:本文归作者所有,未经作者允许,不得转载