Vue + Element+ ASP.NET Core WebAPI 文件上传下载

以ASP.NET Core WebAPI 作后端 API ，用 Vue 构建前端页面，用 Axios 从前端访问后端 API ,包括文件的上传和下载。

准备asp.net后端文件上传的API

UploadFileController.cs

using Microsoft.AspNetCore.Mvc;
using System;
using System.IO;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;

namespace MedicalBidSystem.WebSite.Controllers
{
    /// 

    /// 图片，视频，音频，文档等相关文件通用上传服务类
    /// 

    public class UploadFileController : Controller
    {
        //region 文件上传  可以带参数
        [Route("upload")]
        [HttpPost("upload")]
        public JsonResult UploadProject(IFormFile file, string userId)
        {
            Console.WriteLine("userId--->"+userId);
            if (file != null)
            {
                var fileDir = "D:\\aaa";
                if (!Directory.Exists(fileDir))
                {
                    Directory.CreateDirectory(fileDir);
                }
                //文件名称
                string projectFileName = file.FileName;

                //上传的文件的路径
                string filePath = fileDir + $@"\{projectFileName}";
                using (FileStream fs = System.IO.File.Create(filePath))
                {
                    file.CopyTo(fs);
                    fs.Flush();
                }
                return Json("ok");
            }
            else
            {
                return Json("no");
            }
        }
    }
}

用 element-ui 的 Upload组件上传文件
https://element.eleme.cn/#/zh-CN/component/upload

准备前端Vue上传文件

Bidinvite.vue

```csharp

文件下载

普通的文件下载方式是访问一个后台文件流地址，直接生成对应的文件，下载即可，地址栏中也可携带一些控制参数，但是无法通过header传递参数。

两种文件下载方式，一种是，直接返回file文件，利用浏览器的下载功能。但是这种没有发现可以在发送请求的时候携带token；另一种是利用 Axios 发送下载文件的请求，可以设置header头，可以携带token ，但是response-type是blob类型的。

第一种

后端API

public FileResult downloadRequest()
        {
            //var addrUrl = webRootPath + "/upload/thumb.jpg";
            var addrUrl = "D:/aaa/thumb.jpg";

            var stream = System.IO.File.OpenRead(addrUrl);

            string fileExt = Path.GetExtension("thumb.jpg");

            //获取文件的ContentType

            var provider = new FileExtensionContentTypeProvider();

            var memi = provider.Mappings[fileExt];

            return File(stream, memi, Path.GetFileName(addrUrl));
        }

前端利用浏览器的功能url直接返回文件

<el-button type="primary" v-on:click="downloadRequest">下载文件</el-button>
...
...
...

downloadRequest() {    
    let url = "Home/downloadRequest"; //可以在路径中传递参数
    window.location.href = url;
 },

第二种

后端api ,两个api的返回类型不同，asp.net core 文件下载常用的有FileResult 、FileContentResult 、 FileStreamResult。

       [Route("download")]
    public class DownloadFileController:Controller
    {
        [Route("notice")]
        [HttpGet]
        public FileContentResult downloadRequest1()
        {
            /*  string userid = user_id.ToString(); */
            Console.WriteLine("你很好！");
           
            //string webRootPath = _hostingEnvironment.WebRootPath;
            //var addrUrl = webRootPath + "/upload/thumb.jpg";

            var addrUrl = "E:/VisualStudio_Project/NoticeFile/58.docx";
        
            /*var stream = System.IO.File.OpenRead(addrUrl);

            string fileExt = Path.GetExtension("thumb.jpg");

            //获取文件的ContentType

            var provider = new FileExtensionContentTypeProvider();

            var memi = provider.Mappings[fileExt];

            return File(stream, memi, Path.GetFileName(addrUrl));*/

            //return stream;
            byte[] fileBytes = System.IO.File.ReadAllBytes(addrUrl);
            string fileName = "58.docx";
            return File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Octet, fileName); //关键语句
        }

    }

前端页面

blob(用来存储二进制大文件

<el-button type="primary" v-on:click="downloadNoticeFile">下载文件</el-button>
...
...
import Axios from 'axios';
...
methods: {
   downloadNoticeFile() {
        Axios({
            //用axios发送post请求
            method: "get",
            url: "http://localhost:12600/download/notice", // 请求地址 ，也可以传递参数
            headers: {
              //可以自定义header
              //gggg: "gg" //可以携带token
            },
            responseType: "blob" // 表明返回服务器返回的数据类型
          })
          .then(res => {
            // 处理返回的文件流
            //主要是将返回的data数据通过blob保存成文件
            var content = res.data;
            var blob = new Blob([content]);
            var fileName = "wyy.docx"; //要保存的文件名称
            if ("download" in document.createElement("a")) {
              // 非IE下载
              var elink = document.createElement("a");
              elink.download = fileName;
              elink.style.display = "none";
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href); // 释放URL 对象
              document.body.removeChild(elink);
            } else {
              // IE10+下载
              navigator.msSaveBlob(blob, fileName);
            }
            console.log(res);
          });
      }
      }