如何实现点击图片唤起文件资源管理器「另存为」窗口下载图片

你当前代码的核心问题是用了inline类型的Content-Disposition响应头，这会让浏览器直接在页面中展示图片，而非触发下载流程。要唤起文件资源管理器让用户选择保存文件夹，只需调整响应头的设置即可。

修改要点： #

• 将Content-Disposition的值从inline改为attachment，明确告诉浏览器这是一个需要下载的文件，而非直接显示的内容。
• 保留正确的Content-Type设置，确保浏览器能识别图片格式。

修改后的代码： #

const filepath = decodeURIComponent(req.query.filepath).replace(/\//g, "\\");
const filename = path.basename(filepath);
const fileType = path.extname(filepath).slice(1);

// 改为attachment触发下载弹窗，唤起文件资源管理器选择保存位置
res.setHeader("Content-Disposition", `attachment; filename="${filename}"`);
res.setHeader("Content-Type", `image/${fileType}`);

res.sendFile(filename, { root: path.join(__dirname, "../images") }, (err) => {
  if (err) {
    return next();
  }
});

补充说明： #

这个设置会让浏览器触发“另存为”对话框，也就是唤起文件资源管理器让用户选择保存文件夹。但如果用户的浏览器设置了「自动下载到默认文件夹」且关闭了询问保存位置的选项，可能不会弹出对话框——这属于浏览器端的用户偏好设置，后端无法强制覆盖，但上述代码是触发下载弹窗的标准实现方式。

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