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

本文介绍了如何使用Vue、Element UI和ASP.NET Core WebAPI实现文件上传和下载功能。在后端,创建了UploadFileController以处理文件上传的API。在前端,Vue组件Bidinvite.vue利用element-ui的Upload组件进行文件上传。下载文件方面,探讨了两种方法:一种是直接通过URL下载,另一种是通过Axios发送请求,利用Blob处理响应。
摘要由CSDN通过智能技术生成

以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
{
   
    /// <summary>
    /// 图片,视频,音频,文档等相关文件通用上传服务类
    /// </summary>

    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 =</
  • 12
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值