使用 Http 后方法在 Flutter 中上傳圖像

Question

我是這個框架的新手，我想上傳圖像以及用戶名 id 和 wmail 和電話，但無法做到我收到錯誤

這是圖像獲取圖像 function

  File _image;
  final picker = ImagePicker();

  Future getImage() async {
    pickedFile = await picker.getImage(source: ImageSource.gallery);

    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
      } else {
        print('No image selected.');
      }
    });
  }

在這里，我已經編寫了 Upkoadung 的代碼如何做請幫助我

Future updateUserApiCall(
      String name, String email, String mobile, File profile) async {
    
    String token;
    var userId;
    SharedPreferences storage = await SharedPreferences.getInstance();
    token = storage.getString("apiToken");
    userId = storage.getInt("id");


    String url = "https://www.example.com/api/updateprofile";

    final response = await http.post(
      url + "?page=" + "",
      body: json.encode({
        'user_id': userId,
        'email': email,
        'name': name,
        'phone': mobile,
        'image': profile,
      }),
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json",
        "Authorization": "Bearer " + token,
      },
    );

    if (response.statusCode == 200) {
      print(response.body);
      return UpdateProfileResponseModel.fromJson(
        json.decode(response.body),
      );
    } else if (response.statusCode == 400) {
      print(response.body);
      return ErrorResponseModel.fromJson(
        json.decode(response.body),
      );
    } else if (response.statusCode == 422) {
      print(response.body);
      return ValidationErrorResponseModel.fromJson(
        json.decode(response.body),
      );
    } else {
      print(response);
      throw Exception('Failed to load data!');
    }
  }
}

Answer 1

據我所知，您不能僅使用 http.post 方法傳遞圖像數據。 您必須使用多部分請求。 我也遇到過類似的問題，並在 StackOverFlow 中提出了類似的問題。 請檢查以下鏈接： 使用 file_picker flutter 將圖像上傳到 nodejs 服務器

我的用例是更新用戶的圖像，我使用以下代碼將圖像發送到節點服務器。

Future<bool> updateImage(File imageFile, AuthModel authModel) async{
  final String _accessToken = 'abc';
  final String url =
      'https://justyourserverURL.com/update';

  print("auth : " + _accessToken);
  var request = http.MultipartRequest('POST', Uri.parse(url));

  request.headers['Authorization'] = _accessToken;
  // request.fields['id'] = '104';
  // request.fields['firstName'] = authModel.data.firstName;
  // request.fields['lastName'] = authModel.data.lastName;
  // request.fields['surname'] = authModel.data.surname;

  request.files.add(await http.MultipartFile.fromPath('file', imageFile.path));
  var res = await request.send();
  final respStr = await res.stream.bytesToString();
  print('responseBody: ' + respStr);
  if(res.statusCode==200){
    setCurrentUser(respStr);
    currentUser = authModelFromJson(respStr);
    return true;
  } else {
    print(respStr);
    print('Failed');
    return false;
  }
}

要傳遞用戶名或 id，只需使用 request.fields['user_id'] = userId 傳遞數據。