在 Flutter 中使用 Retrofit 和 Dio 上传图片时出现 500 内部服务器错误

Question

我在 Flutter 应用程序中尝试使用 Dio 和 Retrofit 上传图像时遇到问题。奇怪的是，API 端点在 Postman 中工作正常，但是当我尝试从我的应用程序上传图像时，我收到 500 内部服务器错误。

这是我的 Flutter 代码片段：

这是我的 api_service

import 'package:dio/dio.dart';
import 'package:json_annotation/json_annotation.dart';
import 'package:retrofit/http.dart';
import 'package:retrofit/retrofit.dart';
import 'package:tappbiz/network_manager/models/user_model.dart';

part 'api_service.g.dart';

@RestApi(baseUrl: "https://xxx.xxx..xxx/api/")
abstract class ApiService {
  factory ApiService(Dio dio, {String baseUrl}) = _ApiService;

  @POST("/sendOtp")
  Future<ApiResponse> sendOtp(@Body() Map<String, dynamic> data);



  @POST("/register")
  Future<TokenResponse> register(@Body() Map<String, String> body);

  @POST("/login")
  Future<TokenResponse> login(@Body() Map<String, String> body);

  @GET("/me")
  Future<ProfileMediaResponse> me(@Header('Authorization') String token);

  @POST("/profileMedia")
  @FormUrlEncoded()
  Future<ProfileMediaResponse> profileMedia(
      @Header('Authorization') String token,
      @Field('media') MultipartFile image);
}



And,this is my Image Upload code page:

class _ProfileMediaPageState extends State<ProfileMediaPage> {
  final ApiService apiService = ApiService(Dio());

  late File? _selectedImage = null;

  Future<void> _getImage(ImageSource source) async {
    final picker = ImagePicker();
    final pickedFile = await picker.pickImage(source: source);

    setState(() {
      _selectedImage = pickedFile != null ? File(pickedFile.path) : null;
    });
  }

  final ImagePicker _picker = ImagePicker();

  Future<File?> pickImage() async {
    final pickedFile = await _picker.pickImage(source: ImageSource.gallery);
    if (pickedFile != null) {
      return File(pickedFile.path);
    }
    return null;
  }

  Future<MultipartFile> prepareImage(File imageFile) async {
    final imageBytes = await imageFile.readAsBytes();
    return MultipartFile.fromBytes(imageBytes,
        filename: imageFile.path.split('/').last);

    // ('media_${imageFile.path.split('/').last}', imageBytes);
  }

  Future<void> uploadPickedImage() async {
    String token = TokenManager.getInstance().authToken;
    final pickedImage = await pickImage();
    if (pickedImage != null) {
      final multipartImage = await prepareImage(pickedImage);
      final response =
          await apiService.profileMedia('Bearer $token', multipartImage);
      if (response.fullName!.isNotEmpty) {
        print("image upload successfully");
        // Image uploaded successfully
      } else {
        print("image not upload successfully");
        // Handle error
      }
    }
  }

  

  

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Stack(
              clipBehavior: Clip.none,
              children: [
                Container(
                  width: MediaQuery.of(context).size.width * 0.30,
                  height: MediaQuery.of(context).size.height * 0.15,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.grey[200], // Placeholder color
                  ),
                  child: _selectedImage != null
                      ? ClipOval(
                          child: Image.file(
                            _selectedImage!,
                            fit: BoxFit.cover,
                          ),
                        )
                      : const Icon(
                          Icons.person,
                          size: 50, // Adjust the size as needed
                        ),
                ),
                Positioned(
                  // bottom: 3,
                  top: MediaQuery.of(context).size.height * 0.1,
                  left: MediaQuery.of(context).size.width * 0.17,
                  child: Container(
                    height: 45,
                    width: 45,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(color: Colors.blue),
                      color: Colors.blue,
                    ),
                    child: IconButton(
                      color: Colors.white,
                      icon: const Center(child: Icon(Icons.camera_alt)),
                      onPressed: selectProfileImage,
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              // onPressed: _uploadImage,
              onPressed: uploadPickedImage,
              child: const Text('Upload'),
            ),
          ],
        ),
      ),
    );
  }
}

我已经尽力了，但还是遇到500问题。

使用 Postman 测试时，API 调用似乎工作正常，所以我想知道是否有一些特定于 Dio 或 Retrofit 的东西我可能会丢失。

Answer 1

你找到问题的解决方案了吗？