如何配置公网托管服务器并修改Flutter代码实现带鉴权的文件上传？

一、Flutter代码添加鉴权 #

根据服务器要求，选择以下一种鉴权方式修改代码：

1. Basic基础认证 #

在文件请求中添加Authorization头，需导入dart:convert包：

import 'dart:convert'; // 新增导入

// 修改_uploadFile方法
Future<void> _uploadFile() async {
  if (_selectedFile == null) {
    print('未选择文件');
    return;
  }

  var uri = Uri.parse('http://myhostingdomain.com/upload.php'); // 替换为后端接口地址
  var request = http.MultipartRequest('POST', uri);

  // 生成Basic Auth凭证
  String username = '你的用户名';
  String password = '你的密码';
  String basicAuth = 'Basic ' + base64Encode(utf8.encode('$username:$password'));
  request.headers['Authorization'] = basicAuth;

  request.files.add(await http.MultipartFile.fromPath('file', _selectedFile!.path));

  var response = await request.send();
  if (response.statusCode == 200) {
    String responseBody = await response.stream.bytesToString();
    print('上传成功，服务器返回：$responseBody');
  } else {
    String errorBody = await response.stream.bytesToString();
    print('上传失败：${response.reasonPhrase}，详情：$errorBody');
  }
}

2. Bearer令牌认证 #

若服务器使用JWT等令牌鉴权，替换Authorization头：

request.headers['Authorization'] = 'Bearer 你的访问令牌';

3. 表单字段传递密钥 #

如果要求通过表单字段传递API密钥：

request.fields['api_key'] = '你的API密钥';

二、公网服务器配置（以PHP为例，适配多数托管环境） #

服务器需要后端脚本接收文件，同时配置权限与鉴权：

1. 编写后端接收脚本（upload.php） #

<?php
// 1. Basic Auth鉴权验证
$expectedUser = '你的用户名';
$expectedPass = '你的密码';

$headers = getallheaders();
if (!isset($headers['Authorization']) || !preg_match('/Basic\s+(.*)$/i', $headers['Authorization'], $matches)) {
    http_response_code(401);
    echo json_encode(['error' => '未提供有效认证']);
    exit;
}

$decoded = base64_decode($matches[1]);
list($user, $pass) = explode(':', $decoded, 2);
if ($user !== $expectedUser || $pass !== $expectedPass) {
    http_response_code(403);
    echo json_encode(['error' => '认证失败']);
    exit;
}

// 2. 配置文件存储目录
$uploadDir = './uploaded_files/';
if (!is_dir($uploadDir)) {
    mkdir($uploadDir, 0755, true); // 创建目录并设置权限
}

// 3. 处理文件上传
if (!isset($_FILES['file'])) {
    http_response_code(400);
    echo json_encode(['error' => '未接收到文件']);
    exit;
}

$file = $_FILES['file'];
// 添加时间戳避免文件覆盖
$fileName = time() . '_' . basename($file['name']);
$targetPath = $uploadDir . $fileName;

if (move_uploaded_file($file['tmp_name'], $targetPath)) {
    http_response_code(200);
    echo json_encode(['success' => true, '存储路径' => $targetPath]);
} else {
    http_response_code(500);
    echo json_encode(['error' => '文件存储失败']);
}
?>

2. 服务器权限与配置 #

• 目录权限：确保uploaded_files目录权限为755，Linux服务器执行命令：

  chmod -R 755 /服务器上的目录路径/uploaded_files/
  

• PHP配置检查：修改php.ini（联系托管服务商获取修改方式）：
  • upload_max_filesize = 20M（设置允许的最大文件大小）
  • post_max_size = 25M（需大于upload_max_filesize）
  • file_uploads = On（确保开启文件上传）

3. 问题排查 #

• 查看服务器错误日志（如Apache的error.log、Nginx的error.log），定位文件写入失败原因
• 用Postman测试后端接口，确认接口本身可正常接收文件
• 确保Flutter代码中的接口地址指向upload.php，而非直接指向存储目录

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