《技术大神的宝藏：.NET 6 API 后端 + Vue3 前端实现文件上传与下载的全过程》

2022-11-22 02:33:50

.NET 6 API + Vue3：掌握文件上传和下载的终极指南

导言

在这个数据驱动的时代，文件上传和下载已成为众多应用程序的关键功能。无论您是在构建图像共享应用还是庞大的文档管理系统，处理文件上传和下载的能力至关重要。本指南将引导您使用 .NET 6 API 后端和 Vue3 前端构建完整的解决方案，让您掌握文件上传和下载的艺术。

.NET 6 API 后端设置

首先，创建一个 .NET 6 API 后端项目。添加对 System.IO.Pipelines 包的引用，并更新 Program.cs 文件以处理文件上传和下载请求：

app.UseCors(...); // 允许跨域
app.MapPost("/api/upload", ...); // 处理文件上传
app.MapGet("/api/download/{fileName}", ...); // 处理文件下载

跨域配置

为了允许 Vue3 前端与 .NET 6 API 后端通信，您需要配置跨域：

app.UseCors(builder =>
{
    builder.AllowAnyOrigin()
        .AllowAnyHeader()
        .AllowAnyMethod();
});

Vue3 组件构建

构建一个 Vue3 组件来处理文件上传和下载：

<template>
    <!-- 文件选择、上传和下载按钮 -->
</template>

<script>
    import { ref } from 'vue';

    export default {
        setup() {
            // 初始化文件列表
            const files = ref([]);

            // 处理文件选择
            const onFileChange = (event) => {
                files.value = event.target.files;
            };

            // 处理文件上传
            const onUpload = () => {
                const formData = new FormData();
                for (const file of files.value) {
                    formData.append('files', file);
                }
                fetch('/api/upload', {
                    method: 'POST',
                    body: formData
                }).then(response => response.json())
                    .then(data => console.log(data))
                    .catch(error => console.error(error));
            };

            // 处理文件下载
            const onDownload = () => {
                const fileName = 'file.txt';
                fetch(`/api/download/${fileName}`)
                    .then(response => response.blob())
                    .then(blob => {
                        const url = URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = fileName;
                        a.click();
                        URL.revokeObjectURL(url);
                    })
                    .catch(error => console.error(error));
            };

            return {
                files,
                onFileChange,
                onUpload,
                onDownload
            };
        }
    };
</script>