列出这些文件并将其下载到React JS应用程序中。
你可以使用下面的代码列出Azure文件共享中的文件，并将文件下载到你的本地环境。
首先，您需要创建一个目录，并添加一个文件名为**api.js和app.js**。

API.js

const express = require('express');
const { ShareServiceClient, StorageSharedKeyCredential } = require('@azure/storage-file-share');
const axios = require('axios');
const router = express.Router();
const storageAccountName = "xxxx";
const shareName = "xxxx";
const accountKey = "xxxx";
const sharedKeyCredential = new StorageSharedKeyCredential(storageAccountName, accountKey);
const shareServiceClient = new ShareServiceClient(`https://${storageAccountName}.file.core.windows.net`, sharedKeyCredential);
const directoryName="";
// Route to get the list of files
router.get('/files', async (req, res) => {
  try {
    const directoryClient = shareServiceClient.getShareClient(shareName).getDirectoryClient(directoryName);
    const list=directoryClient.listFilesAndDirectories();
    const files = [];
    for await (const item of list) {
      if (item.kind === 'file') {
        files.push(item.name);
      }
    }
    res.json(files);
  } catch (error) {
    console.error('Error listing files:', error);
    res.status(500).json({ error: 'An error occurred while listing files.' });
  }
});
async function downloadFileInBrowser(fileName) {
  const fileClient = shareServiceClient.getShareClient(shareName).rootDirectoryClient.getFileClient(fileName);
  // Get file content from position 0 to the end
  const downloadFileResponse = await fileClient.download(0);
  return downloadFileResponse.blobBody;
}
router.get('/download/:fileName', async (req, res) => {
  const { fileName } = req.params;
  try {
    const fileContent = await downloadFileInBrowser(fileName);
    res.setHeader('Content-Disposition', `attachment; filename="${fileName}"`);
    res.setHeader('Content-Type', 'application/octet-stream');
    res.send(fileContent);
  } catch (error) {
    console.error('Error downloading file:', error);
    res.status(500).json({ error: 'An error occurred while downloading the file.' });
  }
});
module.exports = router;

字符串

app.js

const express = require('express');
const cors = require('cors');
const apiRouter = require('./api');
const app = express();
const port = process.env.PORT || 5000;
app.use(cors());
app.use('/api', apiRouter);
app.listen(port, () => {
  console.log(`Express app listening on port ${port}`);
});

型
接下来，在react目录中创建**Filelist.js**

FileList.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';
function FileList() {
  const [fileList, setFileList] = useState([]);
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get('http://localhost:5000/api/files');
        setFileList(response.data);
      } catch (error) {
        console.error('Error fetching files:', error);
      }
    }
    fetchData();
  }, []);
  const downloadFile = async (fileName) => {
    try {
      const response = await axios.get(`http://localhost:5000/api/download/${fileName}`, { responseType: 'blob' });
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const a = document.createElement('a');
      a.href = url;
      a.download = fileName;
      a.click();
      window.URL.revokeObjectURL(url);
    } catch (error) {
      console.error('Error downloading file:', error);
    }
  };
  return (
    <div>
      <h1>Files from Azure file share</h1>
      <ul>
        {fileList.map((file, index) => (
          <li key={index}>
            {file}
            <button onClick={() => downloadFile(file)}>Download</button>
          </li>
        ))}
      </ul>
    </div>
  );
}
export default FileList;

型
现在我们应该运行后端代码，它成功运行如下：

的数据
然后，我运行了前端代码，它也成功运行如下：

的
它在浏览器中打开，如下所示。它列出了Azure文件共享中的文件，您可以单击下载按钮下载文件。

的

**参考：**适用于JavaScript的Azure存储文件共享客户端库|微软学习