Flutter中使用Http post方法上传图片答案

【问题标题】：Image Upload in Flutter Using Http post methodFlutter中使用Http post方法上传图片
【发布时间】：2021-03-11 09:38:22
【问题描述】：

我是这个框架的新手，我想上传图片以及用户名 id 和 wmail 和电话，但无法做到我收到错误

这是Image获取图片功能

  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!');
    }
  }
}

【问题讨论】：

标签： flutter http file-upload

【解决方案1】：

据我所知，您不能仅使用 http.post 方法传递图像数据。您必须使用多部分请求。我也遇到过类似的问题，并在 StackOverFlow 中提出了类似的问题。请检查以下链接： uploading image using file_picker flutter to a nodejs server

我的用例是更新用户的图像，我使用以下代码将图像发送到节点服务器。

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 传递数据。

【讨论】：