将 Dropbox API 与 React 集成：综合指南

npm install dropbox

REACT_APP_DROPBOX_ACCESS_TOKEN=your_dropbox_access_token_here

import { Dropbox } from 'dropbox'; const dbx = new Dropbox({ accessToken: process.env.REACT_APP_DROPBOX_ACCESS_TOKEN });

/** * Uploads a file to Dropbox. * * @param {string} path - The path within Dropbox where the file should be saved. * @param {Blob} fileBlob - The Blob data of the file to upload. * @returns {Promise} A promise that resolves when the file is successfully uploaded. */ const uploadFileToDropbox = async (path, fileBlob) => { try { // Append the root directory (if any) to the specified path const fullPath = `${REACT_APP_DROPBOX_ROOT_DIRECTORY || ""}${path}`; // Upload file to Dropbox const response = await dbx.filesUpload({ path: fullPath, contents: fileBlob, mode: { ".tag": "overwrite" }, // Overwrite existing files with the same name mute: true, // Mutes notifications for the upload }); // Return a success response or handle the response as needed return true; } catch (error) { console.error("Error uploading file to Dropbox:", error); throw error; // Re-throw the error for further error handling } };

const handleFileUpload = (event) => { const file = event.target.files[0]; uploadFileToDropbox(file); }; return ( 
  
 );

const fetchFileFromDropbox = async (filePath) => { try { const response = await dbx.filesGetTemporaryLink({ path: filePath }); return response.result.link; } catch (error) { console.error('Error fetching file from Dropbox:', error); } };

export const listFolders = async (path = "") => { try { const response = await dbx.filesListFolder({ path }); const folders = response.result.entries.filter(entry => entry['.tag'] === 'folder'); return folders.map(folder => folder.name); } catch (error) { console.error('Error listing folders:', error); } };

import React, { useEffect, useState } from 'react'; import { Dropbox } from 'dropbox'; // Initialize Dropbox client const dbx = new Dropbox({ accessToken: process.env.REACT_APP_DROPBOX_ACCESS_TOKEN }); /** * Fetches a temporary download link for a file in Dropbox. * * @param {string} path - The path to the file in Dropbox. * @returns {Promise} A promise that resolves with the file's download URL. */ const fetchFileFromDropbox = async (path) => { try { const response = await dbx.filesGetTemporaryLink({ path }); return response.result.link; } catch (error) { console.error('Error fetching file from Dropbox:', error); throw error; } }; /** * DropboxMediaDisplay Component: * Dynamically fetches and displays a media file (e.g., image, video) from Dropbox. * * @param {string} filePath - The path to the file in Dropbox to be displayed. */ const DropboxMediaDisplay = ({ filePath }) => { const [fileLink, setFileLink] = useState(null); useEffect(() => { const fetchLink = async () => { if (filePath) { const link = await fetchFileFromDropbox(filePath); setFileLink(link); } }; fetchLink(); }, [filePath]); return ( 
 {fileLink ? (  ) : ( 
Loading media...
 )} 
 ); }; export default DropboxMediaDisplay;

export const storeResponse = async (response, fileName) => { const blob = new Blob([JSON.stringify(response)], { type: "application/json" }); const filePath = `/dev/responses/${fileName}`; await uploadFileToDropbox(filePath, blob); };

export const listResponses = async () => { try { const response = await dbx.filesListFolder({ path: '/dev/responses' }); return response.result.entries.map(entry => entry.name); } catch (error) { console.error('Error listing responses:', error); } };