如何更改 Error： Failed to detect image file format using the file header 的 Flutter 代码？

问：

问题

我一直面临文件格式错误。所选文件未上传到存储，出现错误：

======== 镜像资源服务================================================捕获异常 在解析图像编解码器时引发了以下 ImageCodecException： 无法使用文件头检测图像文件格式。 文件头为 [0x3c 0x21 0x44 0x4f 0x43 0x54 0x59 0x50 0x45 0x20]。 图片来源：编码图像字节

我想做什么： 用户可以从他们的设备选择并上传 imageFile。选择后，文件 Url 将保存到 list[.每次用户单击添加时，此列表都会更新，并通过 listview.builder 显示。

代码如下：

_add触发 1 的方法。imageAndDescriptions 2.uploadAndGetUrl 3.添加到列表和 firestore

void _add() async{
    final DocumentReference postDocRef = _spaces.doc();
    postId = postDocRef.id;
    //final String? imageUrl = await selectFile();

    await showModalBottomSheet(
        context: context,
        builder: (BuildContext ctx){
          return Container(
            constraints: BoxConstraints(maxHeight: MediaQuery.of(ctx).size.height * 0.8),
            child: Padding(
              padding: EdgeInsets.only(
                  top: 20, left: 20, right: 20,
                  bottom: MediaQuery.of(ctx).viewInsets.bottom +20
              ),
              child: Column(
                children: [
                  ElevatedButton(
                    //Button to add new imageAndDesriptions List entry
                      onPressed: (){
                        setState(() {
                          imageAndDescriptions.add({
                            "Image": "",
                            "Text": "" });
                        });
                      },
                      child: const Text("Add ImageAndDescription")
                  ),

                  Expanded(
                    child: ListView.builder(
                    scrollDirection: Axis.vertical,
                   shrinkWrap: true,

                   itemCount: imageAndDescriptions.length,
                   itemBuilder: (context, index){

                       return Container(
                            color: Colors.grey,
                            //give size to the container
                            constraints: BoxConstraints(
                                maxHeight: MediaQuery.of(ctx).size.height * 0.8),
                            child: Column(
                              children: [
                                TextField(
                                  onChanged: (text){
                                    imageAndDescriptions[index]["Text"]=text;
                                  },
                                  decoration: const InputDecoration(labelText: "Description"),
                                  ),
                                ElevatedButton(
                                  onPressed: () async {
                                  await uploadAndGetUrl();
                                  },
                                  child: const Text(
                                  "Select Image "
                                  ),
                                ),
                                DetailCard(
                                  imageUrl: imageAndDescriptions[index]["Image"],
                                )
                              ],
                            ),
                          );
                       },
                 ),
                  ),

                  const SizedBox(height: 10,),
                  ElevatedButton(
                          onPressed: () async {
                            //final String? imageUrl = await selectFile();
                            final List<Map<String, String>> imagesAndDescriptions = List.from(imageAndDescriptions);
                            for (final item in imagesAndDescriptions){
                              final imageUrl = item["Image"];
                              final spaceDetail = item["Text"];
                              if (spaceDetail!.isNotEmpty){
                                await _spaces.doc(postId).set({
                                  "User": currentUser.uid,
                                  "PostedTime": Timestamp.now(),
                                });
                              }
                              if (imageUrl != null){
                                await _spaces.doc(postId).collection("Details").add({
                                  "Text": spaceDetail,
                                  "Image": imageUrl,
                                });
                              } else{
                                print("imageUrl is null");
                              }
                            }
                           // Navigator.of(ctx).pop();
                            imageAndDescriptions.clear();
                      },
                      child: const Text("Save"))
                ],
              ),
            ),
          );
        });
  }

_add中的 SelectFile 和 UploadFile 方法

  final CollectionReference _spaces = FirebaseFirestore.instance.collection("Spaces");
  String? postId;

  final FirebaseStorage _storage = FirebaseStorage.instance;
  final ImagePicker _imagePicker = ImagePicker();

  //set List of imageAndDescriptions
  List<Map<String, String>> imageAndDescriptions = [];


//Select image
 Future selectWebFile() async {
        final XFile? pickedFile = await _imagePicker.pickImage(source: ImageSource.gallery);
        if (pickedFile != null){
          final Uint8List selectedWebFile = await pickedFile.readAsBytes();

          return selectedWebFile;
          //final imageUrl = await uploadFileWeb(webImage!);
        } else{
          print("no image selected");
          return null;
      }
 }
  Future selectFile() async{
        final XFile? pickedFile = await _imagePicker.pickImage(source: ImageSource.gallery);
        if(pickedFile != null){
          final File selectedFile = File(pickedFile.path);
          return selectedFile;
        } else {
          print("No image has been selected");
          return null;
        }
      }

  Future<String?> uploadFileForWeb(Uint8List webImage) async{
    try{
      final uniqueFileName = DateTime.now().millisecondsSinceEpoch.toString();
      final Reference refRoot = _storage.ref();
      final Reference refDirImages = refRoot.child("images");
      final Reference refImageUploaded = refDirImages.child(uniqueFileName);

      //upload the webImage Data
      final UploadTask uploadTask = refImageUploaded.putData(webImage);
      TaskSnapshot snapshot = await uploadTask;
      //get the URL
      final String imageUrl = await snapshot.ref.getDownloadURL();
      return imageUrl;
    }catch (e){
      print("Error uploading image: $e");
      return null;
    }
  }
//Upload imageFile to storage & download url
  Future <String?> uploadFile(XFile selectedFile) async{
    try{
      //set uniqueFileName for imageFile storage
      final uniqueFileName = DateTime.now().millisecondsSinceEpoch.toString();
      //get path to storage-> DetialImages
      final Reference refRoot = _storage.ref();
      final Reference refDirImages = refRoot.child("images");
      //path to store unique imageFile
      final Reference refImageUploaded = refDirImages.child(uniqueFileName);
      final File imageFile = File(selectedFile.path) ;
      //store imageFile to the path
      final UploadTask uploadTask = refImageUploaded.putFile(imageFile);
      //perform uploadTask
      TaskSnapshot snapshot = await uploadTask;
      //get imageUrl from getDownloadURL method
        final String imageUrl = await snapshot.ref.getDownloadURL();
        //return imageUrl to pass to the firestore
        return imageUrl;
    }catch(e){
      print ("Error uploading image: $e");
      return null;
    }
}

//uplad and show seletedImage
  Future<void> uploadAndGetUrl()async{
   if(kIsWeb){
     final pickedImage = await selectWebFile();
     final String? imageUrl = await uploadFileForWeb(pickedImage);
     if (imageUrl != null) {
       setState(() {
         imageAndDescriptions.add({
           "Image": imageUrl,
           "Text": "",
         });
       });
     } else {
       print("Image upload failed");
     }

   } else{
     final pickedImage = await selectFile();
     final String? imageUrl = await uploadFile(pickedImage);
     if (imageUrl != null) {
       setState(() {
         imageAndDescriptions.add({
           "Image": imageUrl,
           "Text": "",
         });
       });
     } else {
       print("Image upload failed");
     }

   }
  }