嘿，这个需求我之前开发Markdown编辑器时也琢磨过，确实是个能有效节省服务器冗余存储的好思路！核心就是先把用户上传的图片在浏览器本地生成临时可访问地址，让编辑器能正常预览，等用户确认发布时再把这些图片批量上传到服务器，最后替换掉Markdown里的临时地址。下面给你拆解具体实现步骤和代码示例：

1. 处理图片上传的交互（选择/拖拽） #

首先得让用户能把本地图片导入编辑器，这里以文件选择框为例，也可以扩展拖拽上传：

<!-- 隐藏的文件选择框，配合按钮触发 -->
<input type="file" id="imageUpload" accept="image/*" multiple style="display: none;">
<button onclick="document.getElementById('imageUpload').click()">插入本地图片</button>
<div id="markdownEditor" contenteditable="true"></div>

2. 生成本地临时URL并插入Markdown #

拿到用户选择的File对象后，用URL.createObjectURL()生成浏览器能识别的临时地址（比Data URL更高效，尤其适合大图片），同时把File对象和临时URL做关联存储，方便后续上传替换：

const imageUpload = document.getElementById('imageUpload');
const markdownEditor = document.getElementById('markdownEditor');
// 存储待上传的图片：key是临时URL，value是对应的File对象
const pendingImages = new Map();

imageUpload.addEventListener('change', (e) => {
  const files = Array.from(e.target.files);
  files.forEach(file => {
    // 生成临时Blob URL
    const tempUrl = URL.createObjectURL(file);
    // 把File对象和临时URL关联起来
    pendingImages.set(tempUrl, file);
    // 构造Markdown图片语法插入编辑器
    const markdownImage = `![${file.name}](${tempUrl})`;
    // 插入到编辑器光标位置（这里简化处理，直接追加）
    markdownEditor.textContent += `${markdownImage}\n`;
  });
});

3. 发布时批量上传并替换临时地址 #

当用户点击发布按钮时，遍历pendingImages里的文件，逐个上传到服务器，拿到正式URL后替换Markdown内容里的临时地址：

async function publishContent() {
  let markdownContent = markdownEditor.textContent;
  
  // 批量上传图片
  for (const [tempUrl, file] of pendingImages.entries()) {
    try {
      // 模拟上传到服务器的请求
      const formData = new FormData();
      formData.append('image', file);
      const response = await fetch('/api/upload-image', {
        method: 'POST',
        body: formData
      });
      const result = await response.json();
      const officialUrl = result.url; // 服务器返回的正式图片地址
      
      // 替换Markdown里的临时URL
      markdownContent = markdownContent.replaceAll(tempUrl, officialUrl);
      // 释放临时URL的内存
      URL.revokeObjectURL(tempUrl);
    } catch (error) {
      console.error('图片上传失败:', error);
      // 可以在这里处理上传失败的情况，比如提示用户
    }
  }
  
  // 清空待上传列表
  pendingImages.clear();
  
  // 最后把替换好的Markdown内容提交到服务器
  await fetch('/api/publish', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ content: markdownContent })
  });
  
  alert('发布成功！');
}

几个要注意的细节 #

• 临时URL的生命周期：URL.createObjectURL()生成的地址只在当前页面会话有效，刷新页面后就会失效。如果需要支持用户中途刷新，可以考虑把File对象转成Blob后存在localStorage（注意大小限制），或者用IndexedDB存储。
• 大图片优化：如果用户上传超大图片，建议在浏览器端先压缩（用canvas压缩）再生成临时URL，避免占用过多内存。
• 拖拽上传扩展：可以给编辑器添加dragover和drop事件监听，直接处理拖拽进来的图片文件，逻辑和上面的文件选择一致。

这样就能完美实现你想要的“本地预览、发布时上传”的需求啦！

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