如何使用JavaScript及Dropbox SDK获取已上传文件的共享链接

核心逻辑 #

文件上传成功后，调用Dropbox的链接生成API拿到访问地址，再把链接存入本地存储、后端数据库或指定文件中。

修改后的完整代码实现 #

HTML部分 #

<input type="file" id="file-upload" />
<div id="results"></div>
<input type="text" id="access-token" placeholder="输入你的Dropbox Access Token" />
<button onclick="uploadFile()">上传文件</button>

JavaScript部分 #

function uploadFile() {
  const UPLOAD_FILE_SIZE_LIMIT = 150 * 1024 * 1024;
  const ACCESS_TOKEN = document.getElementById('access-token').value;
  const dbx = new Dropbox.Dropbox({ accessToken: ACCESS_TOKEN });
  const fileInput = document.getElementById('file-upload');
  const file = fileInput.files[0];
  const results = document.getElementById('results');

  if (!file) {
    results.appendChild(document.createTextNode('请先选择文件'));
    results.appendChild(document.createElement("br"));
    return false;
  }

  if (file.size < UPLOAD_FILE_SIZE_LIMIT) {
    dbx.filesUpload({ path: '/' + file.name, contents: file })
      .then(uploadRes => {
        // 从上传返回值中提取文件路径
        const filePath = uploadRes.result.path_lower;
        // 调用API生成共享链接
        return dbx.filesCreateSharedLinkWithSettings({ path: filePath });
      })
      .then(linkRes => {
        // 把默认跳转链接改成直接下载链接
        let fileLink = linkRes.result.url.replace('dl=0', 'dl=1');

        // 页面显示结果
        results.appendChild(document.createTextNode(`上传成功！文件链接：${fileLink}`));
        results.appendChild(document.createElement("br"));

        // 存储链接：示例用localStorage存在浏览器，可替换成存后端/文件的逻辑
        const savedLinks = JSON.parse(localStorage.getItem('dropbox-links') || '[]');
        savedLinks.push({
          fileName: file.name,
          link: fileLink,
          uploadTime: new Date().toLocaleString()
        });
        localStorage.setItem('dropbox-links', JSON.stringify(savedLinks));
        
        console.log('链接已保存', savedLinks);
      })
      .catch(err => {
        console.error(err);
        results.appendChild(document.createTextNode(`上传失败：${err.error.summary}`));
        results.appendChild(document.createElement("br"));
      });
  } else {
    results.appendChild(document.createTextNode('文件大小超过150MB限制'));
    results.appendChild(document.createElement("br"));
  }
  return false;
}

关键说明 #

• 链接生成API选择：
  • filesCreateSharedLinkWithSettings：生成长期有效共享链接，适合需要长期访问的场景，注意Token需要有sharing.write权限。
  • filesGetTemporaryLink：生成4小时有效期的临时链接，无需共享权限，适合一次性访问需求。
• 链接改造：默认共享链接是跳转页面，替换dl=0为dl=1可直接触发文件下载。
• 存储扩展：如果要存到外部文件或后端，把localStorage相关代码替换成AJAX请求后端接口，或者通过Node.js等环境写入本地文件即可。

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