在Vue.js项目中实现本地文件上传至FTP服务器，需前后端协同处理，前端通过input[type="file"]获取文件，利用axios上传至后端接口，可结合onUploadProgress实现进度显示，后端采用Node.js的basic-ftp或ftp模块连接FTP服务器，处理文件流传输，需配置FTP地址、端口、用户名及密码等参数，需注意跨域问题（前端直接连FTP可能受限，建议后端代理），并添加文件类型校验、错误处理（如网络异常、权限不足）等逻辑，确保上传安全稳定，依赖安装时，前端无需额外FTP库，后端需安装对应FTP模块（如npm install basic-ftp）。
Vue.js实现本地文件上传至FTP服务器的完整指南
在Web应用开发中，文件上传是常见功能需求，而将本地文件上传至FTP服务器，在企业级应用（如文件管理、资源同步、日志备份等场景）中仍有广泛应用，本文将详细介绍如何基于Vue.js框架，实现本地文件选择并上传至FTP服务器的完整流程，包含环境搭建、核心代码实现、错误处理及优化技巧。
技术准备与环境搭建
技术栈说明
- 前端框架：Vue.js 3（兼容Vue 2,核心逻辑差异较小）
- FTP操作库：
basic-ftp（轻量级、纯TypeScript实现，支持Promise,适合前端直接调用） - 项目构建工具：Vite（推荐，或Vue CLI）
- 其他：Element Plus（UI组件库，用于进度条、按钮等界面交互,可选）
环境搭建
（1）创建Vue项目
# 使用Vite创建Vue 3项目 npm create vue@latest ftp-upload-project cd ftp-upload-project # 安装依赖 npm install
（2）安装FTP操作库
npm install basic-ftp
（3）准备FTP服务器
若无真实FTP服务器，可本地搭建（如使用FileZilla Server、vsftpd等），或使用云服务商提供的FTP服务（如阿里云OSS、腾讯云COS的FTP兼容接口）。
确保FTP服务器已开启写入权限,并获取以下信息：
- 服务器地址（如
ftp.example.com） - 端口（默认21,可自定义）
- 用户名、密码
- 上传目录（如
/upload）
核心功能实现
创建文件上传组件
在src/components目录下创建FtpUpload.vue组件，实现文件选择、上传进度显示及状态反馈。
（1）组件模板（template）
<template>
<div class="ftp-upload-container">
<input
type="file"
ref="fileInput"
@change="handleFileChange"
style="display: none"
/>
<el-button type="primary" @click="triggerFileSelect">
选择文件
</el-button>
<span v-if="fileName" style="margin-left: 10px">{{ fileName }}</span>
<div v-if="isUploading" class="upload-progress">
<el-progress :percentage="uploadProgress" :status="uploadStatus" />
<p>{{ uploadStatus === 'success' ? '上传成功！' : uploadStatus === 'exception' ? '上传失败' : '上传中...' }}</p>
</div>
<el-button
v-if="selectedFile"
type="success"
@click="startUpload"
:loading="isUploading"
style="margin-left: 10px"
>
开始上传
</el-button>
</div>
</template>
（2）组件逻辑（script）
<script setup>
import { ref } from 'vue';
import { Client } from 'basic-ftp';
// 响应式数据
const fileInput = ref(null);
const selectedFile = ref(null);
const fileName = ref('');
const isUploading = ref(false);
const uploadProgress = ref(0);
const uploadStatus = ref(''); // success/exception/normal
// FTP服务器配置（建议通过环境变量存储敏感信息）
const ftpConfig = {
host: import.meta.env.VITE_FTP_HOST || 'ftp.example.com', // 替换为你的FTP服务器地址
port: parseInt(import.meta.env.VITE_FTP_PORT) || 21,
user: import.meta.env.VITE_FTP_USER || 'your_username', // 替换为FTP用户名
password: import.meta.env.VITE_FTP_PASSWORD || 'your_password' // 替换为FTP密码
};
// 触发文件选择
const triggerFileSelect = () => {
fileInput.value.click();
};
// 处理文件选择
const handleFileChange = (event) => {
const file = event.target.files[0];
if (file) {
// 检查文件大小限制（限制为100MB）
const maxSize = 100 * 1024 * 1024; // 100MB
if (file.size > maxSize) {
alert('文件大小不能超过100MB');
return;
}
selectedFile.value = file;
fileName.value = file.name;
// 重置上传状态
uploadProgress.value = 0;
uploadStatus.value = 'normal';
}
};
// 开始上传文件
const startUpload = async () => {
if (!selectedFile.value) return;
isUploading.value = true;
uploadProgress.value = 0;
uploadStatus.value = 'normal';
const client = new Client();
try {
// 连接FTP服务器
await client.access(ftpConfig);
console.log('FTP连接成功');
// 监听上传进度（basic-ftp的uploadFrom支持progress回调）
const progressHandler = (progress) => {
uploadProgress.value = Math.round((progress.bytes / selectedFile.value.size) * 100);
};
// 上传文件（指定上传目录，文件名保持原样或自定义）
const remotePath = `/upload/${selectedFile.value.name}`; // 可自定义路径
await client.uploadFrom(selectedFile.value, remotePath, {
progress: progressHandler
});
uploadProgress.value = 100;
uploadStatus.value = 'success';
console.log('文件上传成功');
// 可选：清空文件选择，允许重复上传
setTimeout(() => {
fileInput.value.value = '';
selectedFile.value = null;
fileName.value = '';
}, 2000);
} catch (error) {
console.error('FTP上传失败:', error);
uploadStatus.value = 'exception';
alert(`上传失败: ${error.message}`);
// 特殊错误处理
if (error.message.includes('Authentication failed')) {
alert('FTP认证失败，请检查用户名和密码');
} else if (error.message.includes('Connection refused')) {
alert('无法连接到FTP服务器，请检查服务器地址和端口');
}
} finally {
isUploading.value = false;
// 确保关闭连接
if (!client.closed) {
client.close();
}
}
};
</script>
（3）组件样式（style）
<style scoped>
.ftp-upload-container {
padding: 20px;
border: 1px solid #e4e7ed;
border-radius: 4px;
max-width: 600px;
margin: 0 auto;
}
.upload-progress {
margin-top: 15px;
padding: 10px;
background-color: #f5f7fa;
border-radius: 4px;
}
.upload-progress p {
margin-top: 10px;
color: #606266;
font-size: 14px;
}
</style>
在页面中使用组件
在src/views目录下的页面组件中引入并使用FtpUpload组件：
<template>
<div class="home">
<h1>FTP文件上传示例</h1>
<FtpUpload />
</div>
</template>
<script setup>
import FtpUpload from '@/components/FtpUpload.vue';
</script>
高级功能与优化
多文件上传支持
修改组件以支持多文件上传：
<template>
<div class="ftp-upload-container">
<input
type="file"
ref="fileInput"
@change="handleFileChange"
style="display: none"
multiple
/>
<el-button type="primary" @click="triggerFileSelect">
选择
