首页 > 解决方案 > 上传到颤振网络时图像已损坏

问题描述

我一直在尝试在 Flutter Web 应用程序中上传图像。上传图像时收到 200 响应代码,但问题是我上传的图像已损坏。我搜索了与我类似的帖子,但我无法解决问题。我尝试使用 http.Multipart 和 dio 包,但两者都给了我相同的结果。基本上我要做的是使用(尝试使用 FilePicer.platform.pickfiles 和 ImagePickerWeb.getImageInfo)从计算机磁盘中选择图像并将其上传到服务器。

我真的真的需要帮助,我需要答案

为什么没人回答这个??

这是使用 ImagePickerWeb 的图像选择器方法

pickProfileImageWeb() async {
    MediaInfo mediaInfo = await ImagePickerWeb.getImageInfo;
            if (mediaInfo != null) {
              setState(() {
                imagevalue = mediaInfo.data!;
              });
            }
            print("mediaInfo is ${mediaInfo.fileName}");

              uploadImageWeb(mediaInfo.data!, mediaInfo.fileName!);
    
               imageUploadWithHttp(mediaInfo.data!);
    }

使用 FilePicker.platform.pickFiles

pickProfileImageWeb() async {
    FilePickerResult? imagePicked = await FilePicker.platform.pickFiles();
    
        if (imagePicked != null) {
          Uint8List? fileBytes = imagePicked.files.first.bytes;
    
          String fileName = imagePicked.files.first.name;

   
    
          setState(() {
            imagevalue = fileBytes!;
          });
    
          print("Image name is $fileName");
    
           uploadImageWeb(fileBytes!, fileName);

           imageUploadWithHttp(fileBytes, fileName);
    }  

这是我同时使用 dio 和 http.Multipart 的上传器

uploadImageWeb(Uint8List fileBytes, String? fileName) async {
    var dioo = Dio();

    try {
      final Map<String, String> header = {
        // "file-name": fileName!,
        "Access-Control-Allow-Origin": "*",
        "Authorization": "Bearer",
      };

      dio.FormData formData = dio.FormData.fromMap(
        {
          "image": dio.MultipartFile.fromBytes(fileBytes),
          "content-type": lookupMimeType(fileBytes.toString())
        },
      );
      String? sUrl = await _profileController.getSignedUrl("profile");

      print("Singed url is $sUrl");

      if (sUrl != null) {
        var response = await dioo.put(
          Uri.parse(sUrl).toString(),
          data: formData,
        );

        _profileController.isPicUploading(true);

        if (response.statusCode == 200) {
          print("The response is ${response.statusCode}");
        } else {
          print("Error when uploading files ${response.statusCode}");
          _profileController.isPicUploading(false);
        }
      } else {
        print("Signed Url is null $sUrl");
      }
    } on Exception catch (e) {
      print("Error is $e");
    }
}

使用 http.Multipart

imageUploadWithHttp(Uint8List? filepath, String? fileName) async {
    try {
      String? sUrl;

      sUrl = await _profileController.getSignedUrl("profile").then(
        (signedUrl) async {
          print("singedUrl is $signedUrl");
          final Map<String, String> header = {
            "file-name": fileName!,
            "Access-Control-Allow-Origin": "*"
          };

          print("Sined url is $signedUrl");

          if (signedUrl != null) {
            var request = http.MultipartRequest(
              "PUT",
              Uri.parse(signedUrl),
            );
            request.headers.addAll(header);

            request.files.add(
              http.MultipartFile.fromBytes(
                "file",
                List.from(filepath!),
                contentType: MediaType("application", 'octet-stream'),
              ),
            );

            _profileController.isPicUploading(true);

            request.send().then((response) {
              if (response == 200) {
                print("Uploaded!");
              } else {
                print("Error when uploading files ${response.statusCode}");
              }
              _profileController.isPicUploading(false);
            });
          }
        },
      );
    } on Exception catch (e) {
      print("error is $e");
      _profileController.isPicUploading(false);
    }
  }
}

在这两种情况下,我都得到了这个。 在此处输入图像描述

在此处输入图像描述

标签: flutter-web

解决方案


当您不为多部分请求提供文件名时,就会发生这种情况。尝试为您的多部分请求提供正确的文件名。例如:

newFormData.files.add(MapEntry(
   mapFile.key,
              apiDio.MultipartFile.fromBytes(
                _selectedFile,
                filename: 'file_up.jpg',
                contentType: new MediaType('image', 'jpg'),
              )));

推荐阅读