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 = ""
});
}
}
}
上面的代码中注入了一个IWebHostEnvironment
接口,主要是为了获取Images
文件夹的路径,命名文件时采用GUID
进行命名,以此确保文件名不会重复。程序运行结果如下图所示:
4、结语
本文主要介绍了ASP.NET Core
中Controller
接收文件的方法。上面给出的例子较为简单,在实际开发过程中,可能还需要去判断上传文件的类型、大小等条件,大家可以根据上面的代码自行拓展。