ASP.NET Core 3.1系列（7）——Controller接收前端上传文件的方法

HerryDong

已于 2022-04-19 10:48:42 修改

阅读量4.1k

点赞数 3

分类专栏： ASP.NET Core C# 文章标签： ASP.NET Core

于 2022-04-19 10:44:55 首次发布

本文链接：https://blog.youkuaiyun.com/HerryDong/article/details/124266138

版权

C# 同时被 2 个专栏收录

72 篇文章

订阅专栏

ASP.NET Core

32 篇文章

订阅专栏

本文介绍如何在ASP.NET Core中通过LayUI前端界面实现多图片上传，并详细讲解了Controller如何使用IFormFileCollection接收文件，包括文件路径管理与命名策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、前言

前一篇博客主要介绍了在GET和POST模式下Controller接收参数的一系列方法，归根结底还是一些简单类型参数的传递和接收。当前端界面需要上传文件时，后台的Controller又应该如何去接收呢？下面开始介绍。

2、搭建前端界面

这里使用LayUI搭建一个简易的前端界面实现多图片上传，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传文件</title>
    <link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="test">多图片上传</button>
        <div class="layui-upload-list" id="demo2"></div>
    </div>
    <script src="layui/layui.js"></script>
    <script>
        layui.use(['upload', 'element'], function () {
            var $ = layui.jquery;
            var upload = layui.upload;
            var element = layui.element;

            upload.render({
                elem: '#test',
                url: 'https://localhost:5001/api/Home/Upload',
                multiple: true,
                before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                    });
                },
                done: function (res) {
                    //上传完毕
                },
                allDone: function (obj) {
                    window.alert('上传成功');
                }
            });
        });
    </script>
</body>
</html>

3、后台接收上传文件

新建一个Images文件夹用来存放上传的图片，如下图所示：
在这里插入图片描述

在ASP.NET时代，我们一般会用HttpFileCollection来接收文件，而在ASP.NET Core中，我们需要使用另一个接口IFormFileCollection来实现，代码如下：

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

namespace App.Controllers
{
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class HomeController : ControllerBase
    {
        private readonly IWebHostEnvironment webHostEnvironment;

        /// <summary>
        /// 构造函数
        /// </summary>
        /// <param name="webHostEnvironment"></param>
        public HomeController(IWebHostEnvironment webHostEnvironment)
        {
            this.webHostEnvironment = webHostEnvironment;
        }

        /// <summary>
        /// 接收文件
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public string Upload()
        {
            IFormFileCollection files = Request.Form.Files;
            foreach (IFormFile file in files)
            {
                string directory = Path.Combine(webHostEnvironment.ContentRootPath, "Images");
                string fileExtension = Path.GetExtension(file.FileName);
                string fileName = Guid.NewGuid().ToString() + fileExtension;
                string filePath = Path.Combine(directory, fileName);

                // 生成文件路径
                while (System.IO.File.Exists(filePath))
                {
                    fileName = Guid.NewGuid().ToString() + fileExtension;
                    filePath = Path.Combine(directory, fileName);
                }

                // 写入文件
                using (var stream = new FileStream(filePath, FileMode.Create))
                {
                    file.CopyTo(stream);
                    stream.Flush();
                }
            }
            return JsonConvert.SerializeObject(new
            {
                code = 0,
                msg = "",
                data = ""
            });
        }
    }
}