JS 使用 Axios 实现文件夹上传

最新推荐文章于 2024-03-13 17:11:18 发布

顺芯技术猿

最新推荐文章于 2024-03-13 17:11:18 发布

阅读量718

点赞数

分类专栏： JS 技术文章标签： javascript 前端 html web

本文链接：https://blog.csdn.net/ShunxinLive/article/details/130288623

版权

JS 技术专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在现代Web应用中，文件上传是一项常见的功能需求。传统的文件上传功能只支持单个文件的上传，但在某些场景下，我们可能需要实现文件夹上传的功能，以一次性上传整个文件夹内的所有文件。本文将介绍如何使用 Axios 这个流行的 JavaScript 库来实现文件夹上传功能。

文章目录

准备工作

在开始实现文件夹上传之前，我们需要在前端页面中引入 Axios 库，并创建一个文件夹上传按钮和一个用于显示上传进度的进度条。以下是一个简单的 HTML 页面示例：

<!DOCTYPE html>
<html>
<head>
  <title>文件夹上传</title>
</head>
<body>
  <h1>文件夹上传</h1>
  <input type="file" id="folderInput" webkitdirectory mozdirectory directory multiple>
  <button id="uploadButton">上传</button>
  <progress id="progressBar" max="100" value="0"></progress>
  <p id="status"></p>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</body>
</html>

在上面的代码中，我们创建了一个文件夹上传按钮，并监听其 change 事件。当用户选择文件夹后，我们会将选中的文件夹包装成 FormData 对象，并调用上传函数。

文件夹上传实现

在 JavaScript 中，我们可以使用 Axios 来发送 POST 请求，并将文件夹的内容作为请求体发送到服务器端。以下是实现文件夹上传功能的 JavaScript 代码：

<script>
  // 获取文件夹上传按钮和进度条
  const folderInput = document.getElementById('folderInput');
  const uploadButton = document.getElementById('uploadButton');
  const progressBar = document.getElementById('progressBar');
  const status = document.getElementById('status');

  // 监听文件夹上传按钮的change事件
  folderInput.addEventListener('change', (event) => {
    const files = event.target.files;
    // 创建FormData对象
    const formData = new FormData();
    for (let i = 0; i < files.length; i++) {
      formData.append('folder[]', files[i]);
    }
    // 调用上传函数
    upload(formData);
  });

  // 上传函数
  function upload(formData) {
    axios.post('/upload', formData, {
      onUploadProgress: (progressEvent) => {
        // 更新进度条
        const percent = (progressEvent.loaded / progressEvent.total) * 100;
        progressBar.value = percent;
        status.textContent = `上传中...${percent.toFixed(2)}%`;
      }
    })
    .then(() => {
      // 上传完成
      progressBar.value = 100;
      status.textContent = '上传完成！';
    })
    .catch(() => {
      // 上传失败
      progressBar.value = 0;
      status.textContent = '上传失败！';
    });
  }
</script>

在上面的代码中，我们使用了 Axios 的 post 方法来发送 POST 请求，并将 formData 作为请求体发送到服务器端的 /upload。onUploadProgress 回调函数用于监听上传进度，并更新进度条的值和状态的文本内容。在上传完成后，我们会更新进度条的值为100，并显示上传完成的状态信息；如果上传失败，则会显示上传失败的状态信息。

总结

使用 Axios 实现文件夹上传是一种简单且高效的方式。通过将文件夹内容包装成 FormData 对象，并使用 Axios 的 POST 请求，我们可以将整个文件夹的内容一次性上传到服务器端，并在前端页面中显示上传进度和状态信息。

顺芯技术猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS 使用 Axios 实现文件夹上传

在现代Web应用中，文件上传是一项常见的功能需求。传统的文件上传功能只支持单个文件的上传，但在某些场景下，我们可能需要实现文件夹上传的功能，以一次性上传整个文件夹内的所有文件。本文将介绍如何使用 Axios 这个流行的 JavaScript 库来实现文件夹上传功能。
复制链接

扫一扫