上传文件代码怎么写(图文)

以下是几种常见编程语言和技术栈中实现文件上传的代码示例：

HTML前端表单

html

<!DOCTYPE html> <html> <head> <title>文件上传</title> </head> <body> <form id="uploadForm" enctype="multipart/form-data"> <input type="file" id="fileInput" name="file" multiple> <button type="submit">上传文件</button> </form> <div id="progress"></div> <div id="result"></div> <script> document.getElementById('uploadForm').addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(); const files = document.getElementById('fileInput').files; // 添加文件到FormData for (let i = 0; i < files.length; i++) { formData.append('files', files[i]); } // 发送请求 const xhr = new XMLHttpRequest(); // 监听上传进度 xhr.upload.addEventListener('progress', function(e) { if (e.lengthComputable) { const percentComplete = (e.loaded / e.total) * 100; document.getElementById('progress').innerHTML = `上传进度: ${percentComplete.toFixed(2)}%`; } }); // 处理响应 xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { document.getElementById('result').innerHTML = '上传成功'; } else { document.getElementById('result').innerHTML = '上传失败'; } } }; xhr.open('POST', '/upload', true); xhr.send(formData); }); </script> </body> </html>

Node.js后端实现

使用Express和Multer

javascript

const express = require('express'); const multer = require('multer'); const path = require('path'); const fs = require('fs'); const app = express(); // 配置multer存储 const storage = multer.diskStorage({ destination: function (req, file, cb) { // 确保上传目录存在 const uploadDir = 'uploads/'; if (!fs.existsSync(uploadDir)) { fs.mkdirSync(uploadDir, { recursive: true }); } cb(null, uploadDir); }, filename: function (req, file, cb) { // 生成唯一文件名 const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9); cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname)); } }); // 文件过滤器 const fileFilter = (req, file, cb) => { // 允许的文件类型 const allowedTypes = /jpeg|jpg|png|gif|pdf|doc|docx|txt/; const extname = allowedTypes.test(path.extname(file.originalname).toLowerCase()); const mimetype = allowedTypes.test(file.mimetype); if (mimetype && extname) { return cb(null, true); } else { cb(new Error('只能上传图片和文档文件!')); } }; // 创建multer实例 const upload = multer({ storage: storage, limits: { fileSize: 10 * 1024 * 1024 // 10MB限制 }, fileFilter: fileFilter }); // 处理单个文件上传 app.post('/upload', upload.single('file'), (req, res) => { try { if (!req.file) { return res.status(400).json({ error: '没有文件被上传' }); } res.json({ message: '文件上传成功', filename: req.file.filename, originalname: req.file.originalname, size: req.file.size, path: req.file.path }); } catch (error) { res.status(500).json({ error: error.message }); } }); // 处理多个文件上传 app.post('/upload-multiple', upload.array('files', 5), (req, res) => { try { if (!req.files || req.files.length === 0) { return res.status(400).json({ error: '没有文件被上传' }); } const fileInfo = req.files.map(file => ({ filename: file.filename, originalname: file.originalname, size: file.size, path: file.path })); res.json({ message: '文件上传成功', files: fileInfo }); } catch (error) { res.status(500).json({ error: error.message }); } }); // 错误处理中间件 app.use((error, req, res, next) => { if (error instanceof multer.MulterError) { if (error.code === 'LIMIT_FILE_SIZE') { return res.status(400).json({ error: '文件太大' }); } if (error.code === 'LIMIT_FILE_COUNT') { return res.status(400).json({ error: '文件数量超过限制' }); } } res.status(500).json({ error: error.message }); }); app.listen(3000, () => { console.log('服务器运行在端口 3000'); });

Python Flask实现

python

from flask import Flask, request, jsonify import os from werkzeug.utils import secure_filename import uuid app = Flask(__name__) # 配置 UPLOAD_FOLDER = 'uploads' ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif', 'doc', 'docx'} MAX_CONTENT_LENGTH = 16 * 1024 * 1024 # 16MB max file size app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER app.config['MAX_CONTENT_LENGTH'] = MAX_CONTENT_LENGTH # 确保上传目录存在 os.makedirs(UPLOAD_FOLDER, exist_ok=True) def allowed_file(filename): return '.' in filename and \ filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS @app.route('/upload', methods=['POST']) def upload_file(): # 检查是否有文件在请求中 if 'file' not in request.files: return jsonify({'error': '没有文件'}), 400 file = request.files['file'] # 如果用户没有选择文件，浏览器也会提交空部分 if file.filename == '': return jsonify({'error': '没有选择文件'}), 400 if file and allowed_file(file.filename): # 安全地生成文件名 filename = secure_filename(file.filename) # 添加唯一标识符防止文件名冲突 unique_filename = f"{uuid.uuid4()}_{filename}" # 保存文件 file_path = os.path.join(app.config['UPLOAD_FOLDER'], unique_filename) file.save(file_path) return jsonify({ 'message': '文件上传成功', 'filename': unique_filename, 'original_filename': filename, 'file_path': file_path }) return jsonify({'error': '不允许的文件类型'}), 400 # 处理多个文件上传 @app.route('/upload-multiple', methods=['POST']) def upload_multiple_files(): if 'files' not in request.files: return jsonify({'error': '没有文件'}), 400 files = request.files.getlist('files') uploaded_files = [] for file in files: if file and file.filename != '' and allowed_file(file.filename): filename = secure_filename(file.filename) unique_filename = f"{uuid.uuid4()}_{filename}" file_path = os.path.join(app.config['UPLOAD_FOLDER'], unique_filename) file.save(file_path) uploaded_files.append({ 'filename': unique_filename, 'original_filename': filename, 'file_path': file_path }) if uploaded_files: return jsonify({ 'message': '文件上传成功', 'files': uploaded_files }) else: return jsonify({'error': '没有有效的文件被上传'}), 400 if __name__ == '__main__': app.run(debug=True)

Java Spring Boot实现

java

@RestController @RequestMapping("/api") public class FileUploadController { private final String UPLOAD_DIR = "uploads/"; @PostMapping("/upload") public ResponseEntity<?> uploadFile(@RequestParam("file") MultipartFile file) { try { // 检查文件是否为空 if (file.isEmpty()) { return ResponseEntity.badRequest().body("请选择一个文件"); } // 创建上传目录 Path uploadPath = Paths.get(UPLOAD_DIR); if (!Files.exists(uploadPath)) { Files.createDirectories(uploadPath); } // 生成唯一文件名 String fileName = System.currentTimeMillis() + "_" + file.getOriginalFilename(); Path filePath = uploadPath.resolve(fileName); // 保存文件 Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING); Map<String, Object> response = new HashMap<>(); response.put("message", "文件上传成功"); response.put("fileName", fileName); response.put("size", file.getSize()); return ResponseEntity.ok(response); } catch (Exception e) { return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR) .body("文件上传失败: " + e.getMessage()); } } @PostMapping("/upload-multiple") public ResponseEntity<?> uploadMultipleFiles(@RequestParam("files") MultipartFile[] files) { try { List<Map<String, Object>> uploadedFiles = new ArrayList<>(); for (MultipartFile file : files) { if (!file.isEmpty()) { // 创建上传目录 Path uploadPath = Paths.get(UPLOAD_DIR); if (!Files.exists(uploadPath)) { Files.createDirectories(uploadPath); } String fileName = System.currentTimeMillis() + "_" + file.getOriginalFilename(); Path filePath = uploadPath.resolve(fileName); Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING); Map<String, Object> fileInfo = new HashMap<>(); fileInfo.put("fileName", fileName); fileInfo.put("originalName", file.getOriginalFilename()); fileInfo.put("size", file.getSize()); uploadedFiles.add(fileInfo); } } Map<String, Object> response = new HashMap<>(); response.put("message", "文件上传成功"); response.put("files", uploadedFiles); return ResponseEntity.ok(response); } catch (Exception e) { return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR) .body("文件上传失败: " + e.getMessage()); } } }

React前端组件

jsx

import React, { useState } from 'react'; const FileUpload = () => { const [selectedFiles, setSelectedFiles] = useState([]); const [uploadProgress, setUploadProgress] = useState(0); const [uploadStatus, setUploadStatus] = useState(''); const handleFileChange = (event) => { setSelectedFiles(Array.from(event.target.files)); }; const handleUpload = async () => { if (selectedFiles.length === 0) { setUploadStatus('请选择文件'); return; } const formData = new FormData(); selectedFiles.forEach((file) => { formData.append('files', file); }); try { setUploadStatus('上传中...'); const response = await fetch('/upload', { method: 'POST', body: formData, }); if (response.ok) { const result = await response.json(); setUploadStatus('上传成功'); console.log('上传结果:', result); } else { setUploadStatus('上传失败'); } } catch (error) { setUploadStatus('上传出错: ' + error.message); } }; return ( <div> <input type="file" multiple onChange={handleFileChange} /> <button onClick={handleUpload}>上传文件</button> <p>{uploadStatus}</p> {uploadProgress > 0 && ( <div>上传进度: {uploadProgress}%</div> )} </div> ); }; export default FileUpload;

这些代码示例涵盖了从前端到后端完整的文件上传功能，包括：