使用 file_picker 将图像上传到 nodejs 服务器答案

【问题标题】：uploading image using file_picker flutter to a nodejs server使用 file_picker 将图像上传到 nodejs 服务器
【发布时间】：2021-05-20 06:33:47
【问题描述】：

我有一个 api，它提供以下数据作为响应：

{
    "status": 200,
    "msg": "Data Found",
    "data": {
        "id": 104,
        "firstName": "aaa",
        "lastName": "aaa",
        "surname": "aaa",
        "email": "email@email.care",
        "phone": "090909090",
        "age": "23",
        "gender": "M",
        "height": "163",
        "bloodGroup": null,
        "weight": "72",
        "status": null,
        "fileId": 228,
        "password": "pass",
        "file": {
            "id": 228,
            "filename": "images.jpg",
            "path": "user/images1613558976577.jpg",
            "alt": "shafa care"
        }
    },
    "success": true,
    "token": "some token",
    "userAccess": "some data"
}

响应中的“file”参数用于保存用户上传的图像。对于我的更新方法，用户需要将他们的令牌作为更新 api 的标头传递。为了更新文件参数，我尝试了许多不同的方法来更新用户图像。下面的代码是使用多部分表单数据来更新现有的文件图像。

Future<AuthModel> updateImage(File imageFile, AuthModel authModel) async{
      final String _accessToken = '${authModel.token}';
  final String url =
      '${GlobalConfiguration().getString('api_base_url')}auth/user/update';

  var stream = new http.ByteStream(imageFile.openRead());
  var length = await imageFile.length();
  var uri = Uri.parse(url);
  var request = new http.MultipartRequest("POST", uri);
  request.headers['Authorization'] = _accessToken;
  // request.headers['Content-Type'] = 'multipart/form-data';
  var multipartFile = new http.MultipartFile('file', stream, length, filename: basename(imageFile.path));
  request.files.add(multipartFile);
  var response = await request.send();
  print("updating: " + response.statusCode.toString());
  response.stream.transform(utf8.decoder).listen((event) {
    currentUser = authModelFromJson(event);
    print("updating img: " + event);
  });
  return currentUser;
}

即使找到数据，上述函数也不会更新我的文件参数。我只是得到同样的旧回应。 filepicker 还会发送用户从图库中选择的正确图像路径。我也尝试过使用 http.client.post 方法，使用令牌作为标头，将“文件”参数作为正文，但是由于 api 仅在上传图像时接受表单数据，所以找不到数据。

它使用表单数据发布方法在邮递员中工作。

我是 Flutter 的新手，还在学习。我被困在这里好几天没有任何解决办法。如何从我的颤振应用程序更新文件参数？任何帮助表示赞赏。

【问题讨论】：

你的问题只是上传图片，还是存储的问题？ @Kamrul Hasan Jony
我的问题只是在用户使用文件选择器库选择图像后更新“文件”参数。
你可以在下面看到我的答案

标签： json flutter dart multipartform-data

【解决方案1】：

这是示例代码。希望对您有所帮助！

 static Future<bool> uploadFileAsFormData(
      String url, File file) async {
    try {
      var uri = Uri.parse(_buildUrl(url));
      var request = http.MultipartRequest('POST', uri);
      request.files.add(await http.MultipartFile.fromPath('file', file.path));

      var res = await request.send();
      if (res.statusCode == 200) {
        return true;
      } else {
   
        return false;
      }
    } catch (err) {

      return false;
    }
  }

【讨论】：

这也不起作用。感谢您的评论。
我认为您应该再次检查您的 API。它返回"success": true, 和status-code 200。错误消息不应与 200 一起出现。这意味着您以前的代码也可以工作。您应该询问后端开发人员或检查后端代码。我另外建议使用Dio 库进行颤动。它使这类任务变得非常容易。 - 谢谢

【解决方案2】：

您可以使用这个Dio上传图片如下code所示：

Dio dio = Dio();

var formData = FormData();
for (var file in filePath) {
  formData.files.addAll([MapEntry("files", await MultipartFile.fromFile(file)),]);
  print(formData.length);
}

var response = await dio.post(url
    data: formData,
    options: Options(headers: {
      'Authorization': _accessToken
    }));

if(response.statusCode == 200){
print(response.data.toString();
}

【讨论】：