React-Native应用跨端FTP存储实现方案咨询

一、优先方案：C#后端代理FTP操作（最稳定跨平台） #

核心逻辑 #

RN客户端不直接对接FTP，而是通过调用C#后端的API接口，由后端统一处理FTP的上传、下载逻辑。这种方式彻底规避RN跨平台FTP兼容问题，还能集中做权限校验、文件格式/大小限制等关键操作。

具体步骤 #

1. C#后端开发API接口

   • 上传接口：接收RN传来的文件流，用FluentFTP（比原生FtpWebRequest更简洁）把文件传到Hostinger VPS的FTP服务器，同时校验用户登录状态（比如JWT令牌）。
   • 下载接口：根据文件标识从FTP拉取文件流，返回给RN客户端，同样要做权限校验。

   代码片段示例：

   using FluentFTP;
   
   // 上传文件到FTP
   public async Task<bool> UploadBlogFile(Stream fileStream, string fileName, string userId)
   {
       var ftpClient = new FtpClient("你的Hostinger FTP地址", "FTP用户名", "FTP密码");
       await ftpClient.ConnectAsync();
       // 按用户ID分目录存储，避免文件混乱
       var savePath = $"/blog_files/{userId}/{fileName}";
       await ftpClient.UploadAsync(fileStream, savePath);
       await ftpClient.DisconnectAsync();
       // 可选：把文件信息存入数据库
       return true;
   }
   
   // 从FTP下载文件
   public async Task<Stream> DownloadBlogFile(string fileName, string userId)
   {
       var ftpClient = new FtpClient("你的Hostinger FTP地址", "FTP用户名", "FTP密码");
       await ftpClient.ConnectAsync();
       var filePath = $"/blog_files/{userId}/{fileName}";
       var stream = new MemoryStream();
       await ftpClient.DownloadAsync(stream, filePath);
       await ftpClient.DisconnectAsync();
       stream.Position = 0;
       return stream;
   }
   

2. RN客户端对接API

   • 上传：用react-native-image-picker或react-native-document-picker选文件，通过axios把文件以FormData形式发给后端接口，携带登录令牌。
   • 下载：调用后端下载接口，用react-native-fs把文件存到本地沙箱，图片/视频直接用RN自带组件预览。

   代码片段示例（上传）：

   import ImagePicker from 'react-native-image-picker';
   import axios from 'axios';
   
   const uploadBlogMedia = async () => {
       const options = {
           mediaType: 'mixed', // 支持图片/视频等
           maxWidth: 1920,
           maxHeight: 1080,
       };
   
       ImagePicker.launchImageLibrary(options, async (response) => {
           if (response.didCancel) return;
           if (response.errorCode) {
               console.error(response.errorMessage);
               return;
           }
   
           const formData = new FormData();
           formData.append('file', {
               uri: response.uri,
               name: response.fileName || `media_${Date.now()}`,
               type: response.type,
           });
   
           try {
               await axios.post('你的C#后端上传接口地址', formData, {
                   headers: {
                       'Authorization': 'Bearer ' + 你的登录令牌,
                       'Content-Type': 'multipart/form-data',
                   },
               });
               alert('上传成功');
           } catch (err) {
               console.error(err);
           }
       });
   };
   

二、备选方案：RN原生模块封装FTP（仅迫不得已时用） #

如果必须让RN直连FTP，只能分别给Android和iOS封装原生FTP模块：

• Android：用Apache Commons Net库实现FTP操作，封装成RN原生模块。
• iOS：用CFNetwork框架或FTPManager第三方库实现FTP操作，封装成RN原生模块。
  但这种方案要维护两套原生代码，成本高，且权限校验得在RN端做，安全性远不如后端代理方案。

三、额外优化建议 #

• 文件路径规划：在Hostinger FTP上按用户ID/上传日期分目录，避免文件重名和混乱。
• 元数据记录：在C#后端数据库里存文件名、存储路径、上传用户ID、时间等信息，方便后续管理查询。
• 进度与断点：上传下载时加进度回调，提升用户体验；大文件可实现断点续传。
• 安全加固：
  • FTP账号密码只存在C#后端配置文件，RN代码里绝不硬编码敏感信息。
  • 接口通信强制用HTTPS，防止明文传输。
  • 对上传文件做病毒扫描，避免恶意文件。

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