本地局域网React应用如何通过Axios实现公共文件夹的文件上传与下载？

前置准备：部署本地局域网文件服务 #

React 属于前端应用，无法直接读写服务器/本地公共文件夹，你需要先在存储文件的局域网设备上部署一个轻量文件服务，示例使用 Node.js + Express 实现，无外网依赖：

// server.js 运行在存储文件的局域网服务器上
const express = require('express');
const multer = require('multer');
const cors = require('cors');
const path = require('path');
const fs = require('fs');

const app = express();
const PORT = 8080;
// 配置本地公共文件夹路径，确保服务运行账号有该文件夹的读写权限
const PUBLIC_FOLDER = path.join(__dirname, 'local-public-storage');

// 初始化公共文件夹
if (!fs.existsSync(PUBLIC_FOLDER)) fs.mkdirSync(PUBLIC_FOLDER, { recursive: true });

// 跨域配置，可限制仅允许你的React应用域名访问
app.use(cors());
// 静态文件服务，暴露公共文件夹用于文件预览、下载
app.use('/files', express.static(PUBLIC_FOLDER));

// 上传文件存储规则配置
const storage = multer.diskStorage({
  destination: (req, file, cb) => cb(null, PUBLIC_FOLDER),
  filename: (req, file, cb) => {
    // 自定义命名规则，避免文件重名覆盖
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, `${file.fieldname}-${uniqueSuffix}${path.extname(file.originalname)}`);
  }
});
const upload = multer({ storage: storage });

// 上传接口
app.post('/upload', upload.single('file'), (req, res) => {
  // 返回文件局域网访问地址，替换192.168.x.x为当前设备的实际局域网IP
  const fileUrl = `http://192.168.x.x:${PORT}/files/${req.file.filename}`;
  res.json({ code: 200, data: { fileUrl, fileName: req.file.originalname } });
});

// 绑定0.0.0.0允许局域网所有设备访问
app.listen(PORT, '0.0.0.0', () => {
  console.log(`文件服务运行成功，局域网访问地址：http://192.168.x.x:${PORT}`);
});

运行服务操作步骤：

• 安装依赖：npm install express multer cors
• 替换代码中所有192.168.x.x为运行服务设备的实际局域网IP
• 启动服务：node server.js
• 开放服务器防火墙8080端口的入站规则，确保同网段设备可以访问

React端Axios实现文件上传 #

import axios from 'axios';

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

  try {
    const res = await axios.post('http://192.168.x.x:8080/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      // 可选配置：添加上传进度监听
      onUploadProgress: (progressEvent) => {
        const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        console.log(`上传进度：${percent}%`);
      }
    });
    console.log('上传成功，文件访问地址：', res.data.data.fileUrl);
    return res.data.data;
  } catch (err) {
    console.error('上传失败：', err);
    throw err;
  }
};

// 调用示例，绑定到文件选择input的onChange事件
const handleFileSelect = (e) => {
  const selectedFile = e.target.files[0];
  if (selectedFile) uploadFile(selectedFile);
};

React端Axios实现文件下载 #

方式1：直接预览/打开 #

上传成功返回的fileUrl可以直接放入<img>、<iframe>、<a>标签中使用，无需额外Axios请求：

• 图片预览：<img src={fileUrl} alt="预览图" />
• PDF预览：<iframe src={fileUrl} width="100%" height="600px" />

方式2：强制下载到本地（避免浏览器直接打开） #

const downloadFile = async (fileUrl, fileName) => {
  try {
    const res = await axios.get(fileUrl, {
      responseType: 'blob'
    });
    // 生成临时下载链接
    const tempUrl = window.URL.createObjectURL(new Blob([res.data]));
    const link = document.createElement('a');
    link.href = tempUrl;
    link.setAttribute('download', fileName);
    document.body.appendChild(link);
    link.click();
    // 清理临时资源
    link.remove();
    window.URL.revokeObjectURL(tempUrl);
  } catch (err) {
    console.error('下载失败：', err);
    throw err;
  }
};

局域网访问注意事项 #

• 所有访问React应用和文件服务的设备必须处于同一个局域网网段
• 运行文件服务的设备建议设置静态局域网IP，避免IP变动导致访问失效
• 可将文件服务地址配置为React应用的环境变量，方便后续统一修改

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