可以通过以下步骤实现:
import React, { useState } from 'react';
function FileUpload() {
const [selectedFile, setSelectedFile] = useState(null);
const handleFileChange = (event) => {
setSelectedFile(event.target.files[0]);
};
const handleUpload = () => {
if (selectedFile) {
const formData = new FormData();
formData.append('file', selectedFile);
// 使用Fetch API或Axios等库将文件上传到后端
fetch('/api/upload', {
method: 'POST',
body: formData,
})
.then((response) => response.json())
.then((data) => {
// 处理上传成功后的响应
console.log(data);
})
.catch((error) => {
// 处理上传失败的错误
console.error(error);
});
}
};
return (
<div>
<input type="file" onChange={handleFileChange} />
<button onClick={handleUpload}>上传</button>
</div>
);
}
export default FileUpload;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using OfficeOpenXml;
[Route("api/[controller]")]
[ApiController]
public class UploadController : ControllerBase
{
[HttpPost]
public IActionResult Upload(IFormFile file)
{
if (file == null || file.Length <= 0)
{
return BadRequest("未选择文件或文件为空");
}
// 检查文件扩展名是否为.xlsx或.xls
if (!Path.GetExtension(file.FileName).Equals(".xlsx", StringComparison.OrdinalIgnoreCase) &&
!Path.GetExtension(file.FileName).Equals(".xls", StringComparison.OrdinalIgnoreCase))
{
return BadRequest("仅支持上传Excel文件");
}
try
{
using (var package = new ExcelPackage(file.OpenReadStream()))
{
// 处理Excel文件数据
// 例如,读取工作表、解析单元格数据等
return Ok("文件上传成功");
}
}
catch (Exception ex)
{
return StatusCode(StatusCodes.Status500InternalServerError, $"文件上传失败:{ex.Message}");
}
}
}
以上代码示例中,前端使用React创建了一个文件上传组件,用户可以选择Excel文件并点击上传按钮。在后端,C# ASP.NET核心的API端点接收到文件后,使用EPPlus库打开Excel文件并进行相应的处理。
这种方法的优势是可以通过前端直接上传Excel文件到后端进行处理,避免了手动上传文件的繁琐步骤。同时,EPPlus库提供了丰富的API来处理Excel文件,可以轻松地读取、写入、修改Excel文件的内容。
推荐的腾讯云相关产品:腾讯云对象存储(COS)用于存储上传的Excel文件,腾讯云云服务器(CVM)用于部署C# ASP.NET核心后端应用。
领取专属 10元无门槛券
手把手带您无忧上云