Flask中如何通过JavaScript POST请求直接从内存传递图片至另一页面？

下面是几种无需将图片写入静态文件夹的实现方案，按场景分类：

纯前端场景（无后端） #

方案1：Data URI + 本地存储/URL参数 #

如果图片可以转成base64格式的Data URI，这是最直接的方式。

源页面处理：

// 示例：从文件选择框获取图片并转Data URI
document.querySelector('input[type="file"]').addEventListener('change', (e) => {
  const reader = new FileReader();
  reader.onload = (event) => {
    const imgData = event.target.result; // 格式类似 data:image/png;base64,...
    
    // 方式1：用SessionStorage存储后跳转（适合大图片，无URL长度限制）
    sessionStorage.setItem('tempImage', imgData);
    window.location.href = 'target.html';
    
    // 方式2：通过URL参数传递（仅适合小图片，注意URL长度限制）
    // window.location.href = `target.html?img=${encodeURIComponent(imgData)}`;
  };
  reader.readAsDataURL(e.target.files[0]);
});

目标页面展示：

window.onload = () => {
  // 对应SessionStorage方式
  const imgData = sessionStorage.getItem('tempImage');
  // 对应URL参数方式
  // const imgData = decodeURIComponent(new URLSearchParams(window.location.search).get('img'));
  
  if (imgData) {
    const img = document.createElement('img');
    img.src = imgData;
    document.body.appendChild(img);
    // 用完清理存储
    sessionStorage.removeItem('tempImage');
  }
};

注意：URL参数有长度限制（不同浏览器约几KB到几十KB），大图片优先用SessionStorage（单域名存储上限约5MB）。

方案2：Blob + IndexedDB（超大图片） #

如果图片超过SessionStorage的存储上限，可以用IndexedDB存储Blob对象：

源页面存储Blob：

// 假设已获取到Blob格式的图片
const imgBlob = ...;

// 打开IndexedDB
const request = indexedDB.open('TempImageDB', 1);
request.onupgradeneeded = (e) => {
  e.target.result.createObjectStore('tempImgs');
};
request.onsuccess = (e) => {
  const db = e.target.result;
  const transaction = db.transaction('tempImgs', 'readwrite');
  transaction.objectStore('tempImgs').put(imgBlob, 'tempImg');
  transaction.oncomplete = () => {
    db.close();
    window.location.href = 'target.html';
  };
};

目标页面读取展示：

window.onload = () => {
  const request = indexedDB.open('TempImageDB', 1);
  request.onsuccess = (e) => {
    const db = e.target.result;
    const transaction = db.transaction('tempImgs', 'readonly');
    const getRequest = transaction.objectStore('tempImgs').get('tempImg');
    getRequest.onsuccess = () => {
      const imgBlob = getRequest.result;
      if (imgBlob) {
        const imgUrl = URL.createObjectURL(imgBlob);
        const img = document.createElement('img');
        img.src = imgUrl;
        document.body.appendChild(img);
        // 释放URL对象
        img.onload = () => URL.revokeObjectURL(imgUrl);
        // 清理存储
        const deleteTrans = db.transaction('tempImgs', 'readwrite');
        deleteTrans.objectStore('tempImgs').delete('tempImg');
        deleteTrans.oncomplete = () => db.close();
      }
    };
  };
};

有后端场景（最优无文件存储方案） #

如果有后端支持，可以通过POST上传图片到后端内存缓存，再通过临时ID在目标页请求展示：

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

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

// 用内存存储上传的图片，不写入磁盘
const storage = multer.memoryStorage();
const upload = multer({ storage });

// 临时缓存，重启服务会清空，生产环境可改用Redis
const tempImgCache = new Map();

// 接收图片上传并返回临时ID
app.post('/upload-temp-img', upload.single('image'), (req, res) => {
  const imgId = Date.now().toString();
  tempImgCache.set(imgId, {
    buffer: req.file.buffer,
    mimeType: req.file.mimetype
  });
  // 跳转到目标页并携带临时ID
  res.redirect(`/target.html?imgId=${imgId}`);
});

// 根据临时ID返回图片数据
app.get('/get-temp-img/:id', (req, res) => {
  const img = tempImgCache.get(req.params.id);
  if (!img) return res.status(404).send('Image not found');
  
  res.set('Content-Type', img.mimeType);
  res.send(img.buffer);
  // 可选：返回后删除缓存，释放内存
  tempImgCache.delete(req.params.id);
});

// 托管静态页面
app.use(express.static('public'));
app.listen(3000);

源页面上传代码 #

// 假设已获取Blob格式图片
const imgBlob = ...;
const file = new File([imgBlob], 'temp.png', { type: 'image/png' });

// 用表单提交上传
const form = document.createElement('form');
form.method = 'POST';
form.action = '/upload-temp-img';
form.enctype = 'multipart/form-data';

const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.name = 'image';
// 用DataTransfer模拟文件输入
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
fileInput.files = dataTransfer.files;

form.appendChild(fileInput);
document.body.appendChild(form);
form.submit();

目标页面展示代码 #

window.onload = () => {
  const imgId = new URLSearchParams(window.location.search).get('imgId');
  if (imgId) {
    const img = document.createElement('img');
    img.src = `/get-temp-img/${imgId}`;
    document.body.appendChild(img);
  }
};

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