ubuntu js如何实现文件上传

在Ubuntu上做文件上传，基本绕不开前端和后端的协同工作。下面直接跳过理论铺垫，用一个完整的示例把流程走一遍。这个示例使用Node.js + Express做后端服务器，前端用原生HTML和Fetch API，最后还会提一下React版本的实现方式。

步骤一：搭建Node.js服务器

先把基础环境搞定——Ubuntu上得装好Node.js和npm。如果还没装，终端里跑这两条命令就够了：

sudo apt update
sudo apt install nodejs npm

1.1 创建项目目录并初始化

mkdir file-upload-demo
cd file-upload-demo
npm init -y

1.2 安装必要的依赖

express是服务器框架，multer用来处理multipart/form-data格式的数据——文件上传就靠它了。

npm install express multer

1.3 创建服务器文件

新建一个server.js，把下面这段代码放进去。注意看注释，每个关键点都有说明：

const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();

// 设置存储引擎
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/') // 文件将保存到uploads目录
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname) // 重命名文件，避免冲突
  }
});

// 初始化上传
const upload = multer({
  storage: storage,
  limits: { fileSize: 10 * 1024 * 1024 }, // 限制文件大小为10MB
  fileFilter: function (req, file, cb) {
    checkFileType(file, cb);
  }
}).single('file'); // 'file'是表单中文件字段的名称

// 检查文件类型
function checkFileType(file, cb) {
  const filetypes = /jpeg|jpg|png|gif/;    // 允许的文件扩展名
  const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
  const mimetype = filetypes.test(file.mimetype);
  if (mimetype && extname) {
    return cb(null, true);
  } else {
    cb('Error: Images Only!');
  }
}

// 创建uploads目录（如果不存在）
const fs = require('fs');
const uploadsDir = './uploads';
if (!fs.existsSync(uploadsDir)){
  fs.mkdirSync(uploadsDir);
}

// 设置静态文件目录
app.use(express.static('public'));

// 路由处理
app.post('/upload', (req, res) => {
  upload(req, res, (err) => {
    if (err) {
      res.status(400).send({ message: err });
    } else {
      if (req.file == undefined) {
        res.status(400).send({ message: 'No file selected!' });
      } else {
        res.send({
          message: 'File uploaded!',
          file: `uploads/${req.file.filename}`
        });
      }
    }
  });
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

1.4 运行服务器

node server.js

服务器默认监听3000端口，启动后保持终端不要关。

步骤二：创建前端页面

在项目根目录下建一个public文件夹，里面放一个index.html：

  
上传文件
  

    
    上传
  
  

注意几个要点：表单的enctype必须设为multipart/form-data，name="file"要和后端.single('file')里的字段名一致。前端用了Fetch API异步提交，省去了页面刷新的麻烦。

步骤三：测试文件上传

确保服务器还在运行，然后浏览器访问http://localhost:3000。选一张图片点上传，如果一切顺利，文件会被保存到uploads/目录，页面上会出现上传成功的消息和图片预览。就这么简单。

可选：增强功能

基础的能跑了，接下来可以根据实际需求扩展：

• 多文件上传：后端改成.array('files', maxCount)，前端加上multiple属性，JS里循环处理文件列表即可。
• 文件类型和大小限制：调整multer的limits和fileFilter，比如允许PDF、限制50MB。
• 用户界面优化：用Bootstrap或Tailwind快速美化，加上进度条、拖拽上传区域。
• 错误处理：后端可以返回更具体的错误码，前端显示“文件太大”“格式不支持”之类的提示。

使用其他前端框架

如果你主力用的是React、Vue或Angular，逻辑完全一致——核心就是用FormData配合fetch或axios把文件发过去。这里以React为例简单演示一下。

3.1 创建React应用

npx create-react-app file-upload-react
cd file-upload-react
npm start

3.2 修改App.js

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [file, setFile] = useState(null);
  const [message, setMessage] = useState('');

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', file);
    axios.post('http://localhost:3000/upload', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    })
    .then(response => {
      setMessage(response.data.message);
      if (response.data.file) {
        const img = document.createElement('img');
        img.src = response.data.file;
        img.width = 300;
        document.getElementById('message').appendChild(img);
      }
    })
    .catch(error => {
      console.error('Error:', error);
      setMessage('上传失败');
    });
  };

  return (
    

      
上传文件
      

        
        上传
      
      
{message}
    
  );
}

export default App;

3.3 安装Axios

npm install axios

3.4 运行React应用

确保Node.js服务器还在运行，然后启动React：

npm start

访问http://localhost:3000就能看到React版本的上传界面了。注意端口冲突的话，可以把React端口改成3001，或者把Node服务器端口改成4000。

总结

以上就是一个完整的Ubuntu下Ja vaScript文件上传实现。从服务器搭建到前端页面，再到React版本的扩展，核心思路始终没变：前端用FormData封装文件，后端用multer解析并保存。在此基础上，用户认证、存储优化（比如上云存储）、进度监听、断点续传这些进阶功能，都可以按需往上加。