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

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日
  • 展开全部

悬赏问题

  • ¥15 Yolov5-7➕mobilebetv3,报错list index out of range
  • ¥15 有没有人会打学生成绩管理系统呀
  • ¥15 在使用Fiddler和夜神模拟器抓包的时候一直出现443该怎么办啊QAQ搜了好几个笔记都没有解决
  • ¥15 3x7的二维数组A、B、C,A中的任意1个数组元素与B的任意1个数组元素、同时又与C的任意1个数组元素比较,把不同位置出现相同数的比较称为无意义,反之称为有意义,把有意义的比较打印输出。
  • ¥20 预测模型怎么处理原始数据(随机森林)
  • ¥20 请问discuz3.5如何实现插入ckplayer全能播放器功能呢?
  • ¥15 thingsboard代码编译出错误
  • ¥15 博途v18仿真报错怎么解决
  • ¥15 欧姆龙plc枕式包装机 ST编程
  • ¥15 为啥快手广告联盟的广告这么难出来