如何将前端生成的JSON Blob文件直接保存至服务器指定目录

核心逻辑说明 #

浏览器端运行的JS没有直接操作服务器文件系统的权限，要把生成的JSON文件存到服务器指定目录，需要走「前端提交JSON数据 -> 后端接收数据 -> 后端写入服务器指定目录」的流程。

第一步：修改前端代码 #

替换原来的下载逻辑，改为向后端发送上传请求，修改后的代码如下：

// 替换原有的saveAsJsonFile函数
async function saveJsonToServer() {
    try {
        const jsonBlob = createJsonBlob();
        // 构造FormData对象用于传输文件
        const formData = new FormData();
        formData.append('jsonFile', jsonBlob, 'image.json');

        // 发送POST请求到后端接口，地址替换为你自己的后端接口地址
        const res = await fetch('/api/upload-json', {
            method: 'POST',
            body: formData
        });

        if (res.ok) {
            alert('文件已成功保存到服务器');
        } else {
            alert('保存失败，请重试');
        }
    } catch (err) {
        console.error('上传出错：', err);
        alert('保存失败，请检查网络');
    }
}

// 修改下载按钮的点击事件绑定
document.getElementById('img-save').addEventListener('click', saveJsonToServer);

第二步：编写后端接收接口 #

以下是两种常用后端框架的实现示例，你可以根据自己的技术栈选择：

示例1：Node.js + Express 实现 #

首先安装依赖：
npm install express multer
服务端代码：

const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');
const app = express();

// 配置文件存储规则
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        // 指定保存到服务器根目录下的json文件夹，需提前创建目录并赋予写入权限
        const savePath = path.resolve(__dirname, './json');
        if (!fs.existsSync(savePath)) {
            fs.mkdirSync(savePath, { recursive: true });
        }
        cb(null, savePath);
    },
    filename: function (req, file, cb) {
        // 固定文件名，如需避免覆盖可加时间戳：`image_${Date.now()}.json`
        cb(null, 'image.json');
    }
});

const upload = multer({ storage: storage });

// 前后端分离部署时需要配置跨域
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'POST');
    next();
});

// 上传接口
app.post('/api/upload-json', upload.single('jsonFile'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('未接收到文件');
    }
    res.status(200).send('保存成功');
});

// 启动服务，端口可自行修改
app.listen(3000, () => {
    console.log('服务运行在 http://localhost:3000');
});

示例2：Python + Flask 实现 #

首先安装依赖：
pip install flask flask-cors
服务端代码：

from flask import Flask, request
from flask_cors import CORS
import os

app = Flask(__name__)
CORS(app) # 允许跨域，前后端同域部署可删除

# 配置保存目录，这里设为服务器根目录下的json文件夹
SAVE_DIR = './json'
os.makedirs(SAVE_DIR, exist_ok=True)

@app.route('/api/upload-json', methods=['POST'])
def upload_json():
    if 'jsonFile' not in request.files:
        return '未接收到文件', 400
    file = request.files['jsonFile']
    if file.filename == '':
        return '文件名为空', 400
    # 保存文件
    file.save(os.path.join(SAVE_DIR, 'image.json'))
    return '保存成功', 200

if __name__ == '__main__':
    app.run(port=3000, debug=True)

注意事项 #

• 服务器指定的保存目录需要开启写入权限，否则会出现写入失败报错
• 生产环境建议增加安全校验：限制上传文件必须为JSON格式、增加身份校验防止未授权上传、不要直接使用用户传入的文件名避免路径穿越漏洞、如需存储多份文件不要固定文件名避免覆盖旧文件
• 如果前后端部署的域名/端口不一致，需要在后端配置跨域规则，否则前端请求会被拦截

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