在现代Web开发中，前后端分离是一种常见的架构模式。它将前端和后端的开发分离，使得两者可以独立进行开发、测试和部署。Vue3和.NET 6是目前流行的前端和后端开发框架，它们提供了丰富的功能和工具，使得前后端分离开发变得更加便捷和高效。

本文将介绍如何在Vue3和.NET 6中实现大文件上传功能。前端部分使用Vue3来封装文件分片上传函数，后端部分使用.NET 6来处理文件分片并保存文件。

首先，让我们看一下前端的上传函数代码：

app.config.globalProperties.uploadFile = async function uploadFile(file) {
  const CHUNK_SIZE = 2 * 1024 * 1024;
  const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
  const fileReader = new FileReader();
  let currentChunk = 0;
  let res = "";
  
  // 显示上传进度
  const toast = Toast.loading({
    duration: 0,
    forbidClick: true,
    message: '0%',
  });
  
  function readAndUploadChunk() {
    return new Promise((resolve, reject) => {
      const start = currentChunk * CHUNK_SIZE;
      const end = Math.min(start + CHUNK_SIZE, file.size);
      const chunk = file.slice(start, end);
      fileReader.readAsArrayBuffer(chunk);
      
      fileReader.onload = async (event) => {
        try {
          const chunkData = event.target.result;
          let res1 = await myAxios.post("/BaoZi/BigFileUpload", chunkData, {
            headers: {
              "Content-Type": "application/octet-stream",
              "File-Name": encodeURIComponent(file.name),
              "Total-Chunks": totalChunks,
              "Current-Chunk": currentChunk,
            },
            transformRequest: null,
          });
          
          if (res1.data !== "") {
            res = res1.data;
          }
          
          currentChunk++;
          
          if (currentChunk < totalChunks) {
            toast.message = `${(start * 100 / file.size).toFixed(2)}%`;
            resolve(readAndUploadChunk());
          } else {
            toast.message = "上传成功";
            toast.clear();
            resolve(res);
          }
        } catch (error) {
          reject({ status: "fail", message: error.message });
        }
      };
    });
  }
  
  return readAndUploadChunk();
}

上述代码中，我们使用FileReader读取文件分片，并通过axios发送分片请求到后端的/BaoZi/BigFileUpload接口。每上传完一个分片，会递归调用readAndUploadChunk函数继续上传下一个分片，直到全部分片上传完成。

接下来，让我们看一下后端的.NET 6代码：

[Route("/BaoZi/BigFileUpload")]
public async Task<IActionResult> UploadFile()
{
    var encodedFileName = Request.Headers["File-Name"];
    var fileName = HttpUtility.UrlDecode(encodedFileName);
    var totalChunks = Convert.ToInt32(Request.Headers["Total-Chunks"]);
    var currentChunk= Convert.ToInt32(Request.Headers["Current-Chunk"]);
    var extension = Path.GetExtension(fileName).ToLower();

    if (!AllowedExtensions.Contains(extension))
    {
        return BadRequest("不允许上传该文件类型");
    }

    var tempPath = Path.Combine(_hostingEnvironment.ContentRootPath, TempDirectory);
    var targetPath = Path.Combine(_hostingEnvironment.ContentRootPath, TargetDirectory, DateTime.Now.ToString("yyyyMMdd"));
    var tempFilePath = Path.Combine(tempPath, fileName);

    if (!Directory.Exists(tempPath))
    {
        Directory.CreateDirectory(tempPath);
    }

    using (var fileStream = new FileStream(tempFilePath, FileMode.Append))
    {
        await Request.Body.CopyToAsync(fileStream);
    }

    if (currentChunk == totalChunks - 1)
    {
        if (!Directory.Exists(targetPath))
        {
            Directory.CreateDirectory(targetPath);
        }

        var targetFileName = Guid.NewGuid().ToString() + Path.GetExtension(fileName);
        var targetFilePath = Path.Combine(targetPath, targetFileName);
        CombineFileChunks(tempPath, fileName, targetFilePath);

        return Ok(targetFilePath.Substring(targetFilePath.IndexOf("\\static")).Replace("\\", "/"));
    }

    return Ok();
}

private void CombineFileChunks(string tempPath, string fileName, string targetFilePath)
{
    using (var targetStream = new FileStream(targetFilePath, FileMode.Append))
    {
        var files = Directory.GetFiles(tempPath, #34;{fileName}.*");
        Array.Sort(files);

        foreach (var filePath in files)
        {
            using (var sourceStream = new FileStream(filePath, FileMode.Open))
            {
                sourceStream.CopyTo(targetStream);
            }

            System.IO.File.Delete(filePath);
        }
    }
}

[Route("/BaoZi/GetFile")]
public async Task<IActionResult> GetFile(string FilePath)
{
    string contentType = "application/octet-stream";
    string fileName = Path.GetFileName(FilePath);
    FilePath = Path.Combine(_hostingEnvironment.ContentRootPath, FilePath);
    return PhysicalFile(FilePath, contentType, fileName);
}

在上述后端代码中，我们定义了UploadFile接口来处理文件分片上传的请求。首先，我们从请求头中获取文件名、分片信息等参数。然后，我们检查文件后缀名是否允许上传，如果不允许，则返回错误响应。

接下来，我们将分片保存到临时路径，并根据当前分片是否为最后一个分片，进行不同的处理。如果是最后一个分片，我们将临时路径中的所有分片文件合并为最终的文件，并将其保存到目标路径。最后，我们返回保存的文件路径。

另外，我们还定义了GetFile接口来获取文件。通过该接口可以根据文件路径获取对应的文件并返回给前端。

最后，前端可以通过调用getFileUrl函数来获取文件的URL，然后在页面中使用该URL来展示图片、视频或者提供文件下载链接。

补充说明：

在上述代码中，我们补充了一些关于后端代码和前端代码的说明。另外，我们还提到了一些相关的工具和组件。

1. 后端代码已经打包到NuGet上，包名是BaoZi.Tools.BigFileUpload。这意味着你可以通过引入该包来使用封装好的大文件上传功能，方便快捷地在你的项目中集成。
2. 前端使用了Vant组件库中的Toast组件来展示上传进度信息。你可以根据自己的需求选择其他组件库或自定义样式来替换Toast组件。
3. 在前端代码中，我们定义了一个名为myAxios的axios实例，通过配置拦截器实现了请求和响应的处理。这个实例可以根据你的需求进行定制和配置。其中，请求拦截器用于在请求头中添加token信息，响应拦截器用于处理响应数据和对特定的状态码进行处理。

let myAxios =  axios.create(AxiosConfig);

//配置拦截器
myAxios.interceptors.request.use(function (config) {
    let token = window.localStorage.getItem("accessToken")
    if (token) {
        config.headers.accessToken = token;    //将token放到请求头发送给服务器
        //这里经常搭配token使用，将token值配置到tokenkey中，将tokenkey放在请求头中
        // config.headers['accessToken'] = Token;
    }
    return config;
}, function (error) {
    // Do something with request error
    return Promise.reject(error);
});


// 添加响应拦截器
myAxios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
 const {accessToken} =response.data;
 if(accessToken && accessToken==="NoLogin"){
    //设置当前的登录信息为NoLogin
    localStorage.setItem("accessToken","NoLogin");
    router.push('/Login/Index')
 }
    return response;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么


    return Promise.reject(error);
});

下面是使用方法：

上传调用

//这里获取的path是后端保存的路径
let path = await this.uploadfile(file);

获取文件

需要再定义一个函数getFileUrl，如果后端有登录校验，则需要加上token如：

app.config.globalProperties.getFileUrl = function getFileUrl(path){
    return '/'+AxiosConfig.baseURL+'/BaoZi/GetFile?FilePath='+path+'&token='+ encodeURIComponent(window.localStorage.getItem('accessToken')) 
  }

代码示例

图片
<img style="width: 100px;height: 100px;"
:src="getFileUrl('/static/upload/files/20230512/64c6b565-e401-4e31-b593-fcaccc9bde16.jpg')">

视频
<video controls>
      <source :src="getFileUrl('/static/upload/files/20230514/cab8b3e4-c44f-4337-9844-08e92d656efc.mp4')" type="video/mp4">
</video>

文件下载
<a :href="getFileUrl('/static/upload/files/20230512/32ccdf96-f8c7-442f-88e4-71c17a4cdd2e.rar')">
下载附件
</a>