alianage2006 2024-02-27 16:02 采纳率: 0%
浏览 46
已结题

Js和c#如何将含有图片的excel文件上传到后台服务器,并通过ajax请求后前台easyui-datagrid显示

1.我的本地excel文件中有一列是图片,其它列是数据,编程前端使用Js 后台使用c#。
2.要求前端画面有一个上传按钮,可以选择本地文件上传到后台数据库存储,成功后显示到前台easyui-datagrid表格中。
3.要求前端画面有一个下载按钮,可以将后台数据库中这个表下载到本地电脑。
4.需要前后台完整代码,🙏各位

  • 写回答

26条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-02-27 16:03
    关注
    获得1.00元问题酬金

    引自免费微信小程序:皆我百晓生

    在前端使用JavaScript(配合HTML5)上传含有图片的Excel文件至后台C++服务器,实际操作中,通常不会直接通过C++接收文件,而是会通过一个中间层服务(如Node.js、Java或C#等)来处理HTTP请求和文件上传。这里假设你有一个支持文件上传的后端服务,并通过HTTP接口与C++程序交互。

    前端(JavaScript)实现:

    <!-- HTML部分 -->
    <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="excelFile" accept=".xlsx, .xls" />
        <button type="submit">上传</button>
    </form>
    
    <script>
    // JavaScript部分
    document.getElementById('uploadForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      
      const formData = new FormData(e.target);
      const response = await fetch('/api/upload_excel', {
        method: 'POST',
        body: formData
      });
    
      // 处理响应,例如检查上传是否成功
      const result = await response.json();
      console.log(result);
    });
    </script>
    

    后端(以Node.js + Express为例,而非C++):

    const express = require('express');
    const multer = require('multer'); // 用于处理multipart/form-data类型的请求
    const excelJs = require('exceljs'); // 用于读取Excel文件
    
    const app = express();
    const upload = multer({ dest: 'uploads/' }); // 设置临时文件存储路径
    
    app.post('/api/upload_excel', upload.single('excelFile'), async (req, res) => {
      try {
        // 获取上传的文件
        const file = req.file;
    
        // 使用excelJs库打开并读取Excel文件中的图片数据
        const workbook = new excelJs.Workbook();
        await workbook.xlsx.readFile(file.path);
    
        // 假设Sheet1的第一列包含图片
        const worksheet = workbook.getWorksheet(1);
        for (let row of worksheet.rows) {
          const cell = row.getCell(1); // 第一列
          if (cell && cell.type === excelJs.CellType.IMAGE) {
            // 图片保存到服务器或其他处理逻辑
            const imageData = cell.value;
            // 这里仅作演示,实际应用中你需要根据imageData内容将其保存或转发给C++
          }
        }
    
        // 清理资源并发送成功响应
        workbook.close();
        res.status(200).json({ message: '文件上传成功' });
      } catch (err) {
        console.error(err);
        res.status(500).json({ error: '上传过程中发生错误' });
      }
    });
    
    app.listen(3000, () => console.log('Server started on port 3000'));
    

    由于C++不直接处理HTTP请求和文件上传,所以实际场景中,上述Node.js服务接收到文件后,可以将解析出来的图片数据转换成合适格式,通过本地文件系统或者进程间通信(IPC)的方式传递给C++程序进行进一步处理。

    注意,C++如果需要处理上传的文件,可能需要结合网络编程库如Poco、Boost.Asio或第三方HTTP服务器框架(如Cpprestsdk),但这些细节超出了本问题的范围。

    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 3月6日
  • 修改了问题 2月28日
  • 修改了问题 2月28日
  • 修改了问题 2月28日
  • 展开全部

悬赏问题

  • ¥60 优博讯DT50高通安卓11系统刷完机自动进去fastboot模式
  • ¥15 minist数字识别
  • ¥15 在安装gym库的pygame时遇到问题,不知道如何解决
  • ¥20 uniapp中的webview 使用的是本地的vue页面,在模拟器上显示无法打开
  • ¥15 网上下载的3DMAX模型,不显示贴图怎么办
  • ¥15 关于#stm32#的问题:寻找一块开发版,作为智能化割草机的控制模块和树莓派主板相连,要求:最低可控制 3 个电机(两个驱动电机,1 个割草电机),其次可以与树莓派主板相连电机照片如下:
  • ¥15 Mac(标签-IDE|关键词-File) idea
  • ¥15 潜在扩散模型的Unet特征提取
  • ¥15 iscsi服务无法访问,如何解决?
  • ¥15 感应式传感器制作的感应式讯响器