如何使用JavaScript将Dropbox中的图片下载保存到本地项目指定文件夹

核心前提：运行在浏览器端的Vue代码受浏览器沙箱安全限制，无法绕过用户主动操作直接写入项目本地文件夹，根据你的实际运行场景选择对应实现方案即可：

场景1：浏览器端Vue，触发用户手动下载到本地 #

该方案会触发浏览器默认下载弹窗，用户可自主选择保存路径（包括你的项目本地文件夹），修改你的代码如下：

getImages() {
  const Dropbox = require("dropbox").Dropbox;
  const dbx = new Dropbox({
    accessToken: "<REDACTED>",
  });
  dbx
    .filesDownload({
      path: "/test/road-6576857_1920.jpg",
    })
    .then(function (response) {
      // 提取返回的文件二进制流
      const fileBlob = response.result.fileBlob;
      // 生成临时下载链接
      const tempUrl = window.URL.createObjectURL(fileBlob);
      // 创建a标签触发下载
      const a = document.createElement('a');
      a.href = tempUrl;
      a.download = "road-6576857_1920.jpg"; // 自定义下载后的文件名
      document.body.appendChild(a);
      a.click();
      // 清理临时资源
      document.body.removeChild(a);
      window.URL.revokeObjectURL(tempUrl);
    })
    .catch(err => console.error("下载失败：", err));
}

场景2：Node.js运行环境（服务端/本地脚本）直接写入项目文件夹 #

如果这段代码运行在Node.js侧（比如Nuxt服务端接口、本地构建脚本等），没有沙箱限制，可直接通过fs模块写入项目指定目录：

const fs = require('fs/promises');
const path = require('path');

async function getImages() {
  const Dropbox = require("dropbox").Dropbox;
  const dbx = new Dropbox({
    accessToken: "<REDACTED>",
  });
  try {
    const response = await dbx.filesDownload({
      path: "/test/road-6576857_1920.jpg",
    });
    // 自定义项目内保存路径，示例为保存到当前文件同级的assets文件夹下
    const savePath = path.join(__dirname, './assets/road-6576857_1920.jpg');
    // 写入本地文件
    await fs.writeFile(savePath, response.result.fileBinary);
    console.log("文件已保存到：", savePath);
  } catch (err) {
    console.error("文件写入失败：", err);
  }
}

提示：如果获取二进制内容失败，可打印response.result核对返回字段，不同版本Dropbox SDK的二进制字段命名可能存在差异。

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