点击按钮上传CSV到Azure SQL或Blob Storage的JavaScript实现方案咨询

首先明确：该功能完全可以用JavaScript技术栈实现，无需更换开发语言。但出于安全考虑，禁止直接在浏览器端JS中硬编码Azure SQL、Blob存储的访问密钥，因此我们采用「前端浏览器JS + Node.js后端（或Azure Functions无服务后端，均用JS编写）」的两层架构实现。

前端页面实现 #

可以在你现有结构基础上补充格式校验、文件上传逻辑，参考代码如下：

<input type="file" id="upload1" accept=".csv">
<button onclick="upload()" id="submitMain">提交</button>

<script>
async function upload() {
  const fileInput = document.getElementById('upload1');
  const file = fileInput.files[0];
  // 前端基础校验
  if (!file) {
    alert('请先选择CSV文件');
    return;
  }
  if (file.type !== 'text/csv' && !file.name.endsWith('.csv')) {
    alert('仅支持上传CSV格式文件');
    return;
  }

  // 构造表单数据传给后端
  const formData = new FormData();
  formData.append('csvFile', file);

  try {
    const res = await fetch('http://你的后端接口地址/upload', {
      method: 'POST',
      body: formData
    });
    res.ok ? alert('文件上传导入成功') : alert('导入失败，请重试');
  } catch (err) {
    console.error('上传出错：', err);
  }
}
</script>

后端实现（Node.js + Express 示例） #

后端负责接收前端传输的CSV文件，处理后写入Azure SQL或者Blob存储，全程用JS编写即可满足你的需求。
首先安装依赖包：

npm install express multer tedious @azure/storage-blob cors

后端参考代码：

const express = require('express');
const multer = require('multer');
const { BlobServiceClient } = require('@azure/storage-blob');
const { Connection, Request, TYPES } = require('tedious'); // Azure SQL操作库
const cors = require('cors');
const app = express();
app.use(cors());
// 小文件直接存在内存处理，大文件建议用磁盘存储
const upload = multer({ storage: multer.memoryStorage() });

// Azure服务配置，这些敏感信息绝对不能暴露给前端
const AZURE_BLOB_CONN_STR = '你的Blob存储连接字符串';
const AZURE_SQL_CONFIG = {
  server: '你的SQL服务器地址',
  authentication: {
    type: 'default',
    options: { userName: 'SQL用户名', password: 'SQL密码' }
  },
  options: { database: '数据库名', encrypt: true }
};

// 上传处理接口
app.post('/upload', upload.single('csvFile'), async (req, res) => {
  const csvFile = req.file;
  // 可选方案1：先将文件存储到Blob容器
  const blobServiceClient = BlobServiceClient.fromConnectionString(AZURE_BLOB_CONN_STR);
  const containerClient = blobServiceClient.getContainerClient('你的Blob容器名');
  const blockBlobClient = containerClient.getBlockBlobClient(csvFile.originalname);
  await blockBlobClient.uploadData(csvFile.buffer);

  // 可选方案2：直接解析CSV写入Azure SQL
  const csvContent = csvFile.buffer.toString('utf-8');
  const rows = csvContent.split('\n').map(row => row.split(','));
  // 建立SQL连接插入数据，示例假设表有col1、col2两个字段
  const conn = new Connection(AZURE_SQL_CONFIG);
  conn.on('connect', err => {
    if (err) throw err;
    // 跳过表头行逐行插入
    for (let i = 1; i < rows.length; i++) {
      if (!rows[i][0]) continue;
      const request = new Request(
        `INSERT INTO 你的表名 (col1, col2) VALUES (@col1, @col2)`,
        err => err && console.log('插入出错', err)
      );
      request.addParameter('col1', TYPES.VarChar, rows[i][0].trim());
      request.addParameter('col2', TYPES.VarChar, rows[i][1].trim());
      conn.execSql(request);
    }
    res.sendStatus(200);
  });
  conn.connect();
});

app.listen(3000, () => console.log('后端服务运行在3000端口'));

注意事项 #

• 不想自己维护服务器的话，可以用支持JS编写的Azure Functions替代上述Node.js服务，成本更低
• 生产环境需要补充用户权限校验，防止未授权用户上传文件
• 如果CSV格式复杂，推荐引入csv-parser第三方库做解析，不要手动写分割逻辑
• 大文件建议先传Blob存储，再调用Azure官方的Blob到SQL的导入工具处理，性能更稳定

内容的提问来源于stack exchange，提问作者mully