vue3.0搭配.net core实现文件上传组件

下面是详细讲解如何使用Vue3.0搭配.NET Core实现文件上传组件的攻略。

1. 准备工作

首先，你需要安装以下工具和环境：

Node.js和npm
.NET Core SDK
Vue CLI 3

接下来，在.NET Core项目中添加所需的依赖项：

dotnet add package Microsoft.AspNetCore.Http
dotnet add package Microsoft.AspNetCore.StaticFiles

2. 实现文件上传组件

前端组件

在Vue3.0项目中，你可以使用Vue组件来实现文件上传功能。以下是一个示例：

<template>
  <div>
    <input type="file" @change="uploadFile">
  </div>
</template>

<script>
export default {
  methods: {
    async uploadFile(event) {
      const file = event.target.files[0]
      const formData = new FormData()
      formData.append('file', file)
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData
      })
      console.log(await response.text())
    }
  }
}
</script>

这个组件实现了在用户选择文件后将文件上传到服务器的功能。其中，fetch API被用来向.NET Core服务器发送POST请求。

后端API

在.NET Core项目中，你需要编写一个API来处理文件上传请求。以下是一个示例：

[HttpPost("upload")]
public async Task<IActionResult> UploadFile(IFormFile file)
{
    var targetFilePath = Path.Combine("uploads", file.FileName);
    using (var stream = new FileStream(targetFilePath, FileMode.Create))
    {
        await file.CopyToAsync(stream);
    }
    return Ok();
}

这个API会在/api/upload路径上接受POST请求，并将上传的文件保存在服务器的uploads文件夹中。此外，还需要引入Microsoft.AspNetCore.Http和Microsoft.AspNetCore.StaticFiles命名空间。