在本文中，我们将深入探讨如何在React应用程序中实现文件上传和下载功能。这是一项常见的任务，但确保安全、高效且用户友好的实现需要仔细考虑。

文件上传

基础上传

首先，我们将介绍如何实现基本的文件上传功能。使用react-dropzone等库可以简化此过程，并提供友好的拖放功能。

import { useDropzone } from 'react-dropzone';

function FileUploader() {
  const onDrop = (acceptedFiles) => {
    // 处理上传的文件
  };

  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>将文件拖放到此处，或点击以选择文件</p>
    </div>
  );
}

进阶上传

深入了解如何在文件上传中添加进度条和错误处理，提高用户体验。

import axios from 'axios';

async function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await axios.post('/api/upload', formData, {
      onUploadProgress: (progressEvent) => {
        const percentCompleted = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );
        // 更新进度条
      },
    });
    // 处理成功上传后的逻辑
  } catch (error) {
    // 处理上传错误
  }
}

文件下载

基础下载

展示如何通过简单的链接实现文件下载。

function FileDownloader() {
  return (
    <a href="/api/download" download>
      下载文件
    </a>
  );
}

进阶下载

通过AJAX请求或其他方式，实现更灵活的文件下载方式，例如下载之前的确认或添加下载前的权限验证。

import axios from 'axios';

async function downloadFile() {
  try {
    const response = await axios.get('/api/download', {
      responseType: 'blob',
    });

    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'filename.ext');
    document.body.appendChild(link);
    link.click();
  } catch (error) {
    // 处理下载错误
  }
}

安全性考虑

在整个过程中，确保实现安全上传和下载，包括身份验证、文件类型验证和防止潜在的安全风险。

结论

通过本文，你应该能够实现一个完整的React文件上传和下载系统。从基础功能到高级特性，为用户提供流畅的体验并确保数据的安全性。