首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将Excel文件从React上传到C# ASP.NET核心后端

可以通过以下步骤实现:

  1. 在React前端中,使用HTML的<input type="file">元素创建一个文件上传表单,并添加一个事件处理程序来处理文件选择事件。
代码语言:txt
复制
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;
  1. 在C# ASP.NET核心后端中,创建一个API端点来处理文件上传请求,并使用第三方库如EPPlus来解析Excel文件。
代码语言:txt
复制
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核心后端应用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券