Flutter 无法上传从 multi_image_picker 获取的多张图片

Posted 2023-02-19

【中文标题】Flutter 无法上传从 multi_image_picker 获取的多张图片

【英文标题】：Flutter Failed to upload Multiple images obtained from multi_image_picker

【发布时间】：2019-10-14 03:52:48

【问题描述】：

我已成功使用 multi_image_picker 获取多张图片，但未能将图片上传到 Firebase 存储。我正在寻求有关将图像保存到 Firebase 存储并返回 URL 的帮助。

我已经在下面发布了我的代码，谢谢。

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/services.dart';
import 'package:multi_image_picker/multi_image_picker.dart';
import 'package:mock_data/mock_data.dart';



class PageTwo extends StatefulWidget 
  @override
  _MyAppState createState() => new _MyAppState();


class _MyAppState extends State<PageTwo> 
  List<Asset> images = List<Asset>();
  String popop = mockString(50);

  @override
  void initState() 
    super.initState();
  

  Widget buildGridView() 
    return GridView.count(
      crossAxisCount: 3,
      children: List.generate(images.length, (index) 
        Asset asset = images[index];
        return AssetThumb(
          asset: asset,
          width: 300,
          height: 300,
        );
      ),
    );
  

  Future saveImage(Asset asset) async 
    String fileName = popop;
    ByteData byteData = await asset.requestOriginal();
    List<int> imageData = byteData.buffer.asUint8List();
    StorageReference ref = FirebaseStorage.instance.ref().child(fileName);
    StorageUploadTask uploadTask = ref.putData(imageData);

    return await (await uploadTask.onComplete).ref.getDownloadURL();
  

  Future<void> loadAssets() async 
    List<Asset> resultList = List<Asset>();
    try 
      resultList = await MultiImagePicker.pickImages(
          maxImages: 300,
          enableCamera: true,
          selectedAssets: images,
          cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
          materialOptions: MaterialOptions(
            actionBarColor: "#abcdef",
            actionBarTitle: "Example App",
            allViewTitle: "All Photos",
            selectCircleStrokeColor: "#000000",
          ));
     
    
    if (!mounted) return;

    setState(() 
      images = resultList;
      _error = error;
    );
  

  @override
  Widget build(BuildContext context) 
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('Getting pics'),
        ),
        body: Column(
          children: <Widget>[
            RaisedButton(
              child: Text("Pick images"),
              onPressed: loadAssets,
            ),
            RaisedButton(
              child: Text("Save Image"),
              onPressed: () => saveImage,
            ),
            Expanded(
              child: buildGridView(),
            )
          ],
        ),
      ),
    );
  

【参考方案1】：

看起来您实际上并没有对 URL 进行任何操作。您在 saveFile 上的 Future 不会返回任何内容，您也不会将结果放在任何地方。

await (await uploadTask.onComplete).ref.getDownloadURL()

另外，等待等待看起来有点奇怪。您可能只需级联 onComplete 等待就可以侥幸逃脱。我不完全确定，但值得一试。

await uploadTask.onComplete..ref.getDownloadURL()

此外，当我使用 StorageUploadTask 时，我通常会听取任务以获取上传进度，然后添加 onComplete 部分以获取下载 URL。

【讨论】：

非常感谢你救了我。