JsonDecoded Uint8List 图像不显示 Flutter

Question

在我的电子商务应用程序中，我有一个 ProductsScreen，它有一个按钮，可以按下 NewEditProductScreen 以创建新产品 sheet 或编辑现有产品。

我使用 ImagePicker 和 ImagePickerWeb 来 select 产品的图片 sheet 并且因为我需要一种适用于 Web 和设备应用程序版本的通用格式，所以我使用 Uint8List 来选择图片。然后将其上传到 returns downloadUrl 的 Firebase 存储（所有工作）。然后将产品保存到 sembast（用于本地库存）和用于电子商务产品搜索的 firebase。

为了保存选择到 sembast 的 Uint8List，我在 toMap() 中使用 jsonEncode，在 fromMap() 模型的方法中使用 jsonDecode。现在的问题是，在 NewEditProductScreen 上显示选取的图像时 Image.memory(imageData) 按预期工作，在 ProductScreen 中加载产品时，显示 Image.memory(productImage) 的图像未显示。与编码之前一样，图像按预期显示，但在 encoding/decoding 之后，我猜 jsonEncode 和 jsonDecode 不能很好地与 Uint8List 一起工作？我还能尝试将 Uint8List 保存到 sembast 吗？我试着不 decode/encode 它去 sembast 但它没有帮助。

NewEditProductScreen 接收选取的图像状态：

if (state is PickedImage) {
              setState(() {
                imageData = state.imageData;
                print('  ###### Uint8List picked image is: ${state.imageData}');
              });
            }

显示它的 NewEditProductScreen：

Container(
                        color: Colors.lightBlueAccent,
                        child: Stack(children: [
                          Center(
                            child: Image.memory(imageData), //productImage),
                          ),
                          GestureDetector(
                            onTap: () {
                              BlocProvider.of<ProductBloc>(context)
                                  .add(PickImage());
                            },
                            child: Center(
                              child: AutoSizeText(
                                AppLocalizations.instance.text('Choose image'),
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 15,
                                    fontWeight: FontWeight.w500),
                                minFontSize: 8,
                                maxLines: 1,
                                group: autoSizeGroup,
                              ),
                            ),
                          ),
                        ]),
                      ),

ProductsScreen 已加载 selected 产品状态：

                  setState(() {
                    productId = state.product.productId;
                    productName = state.product.productName;
                    brand = state.product.brand;
                    price = state.product.price;
                    productDescription = state.product.productDescription;
                    category = state.product.category;
                    isPromotion = state.product.isPromotion;
                    vendor = state.product.vendor;
                    barcode = state.product.barcode;
                    productImage = state.product.productImage;
                    imageUrl = state.product.imageUrl;
                    minimumStock = state.product.minimumStock;
                    availableQuantity = state.product.availableQuantity;
                    soldQuantity = state.product.soldQuantity;
                    print(
                        '  ###### Uint8List image is: ${state.product.productImage}');
                  });
                }

及图片显示：

Container(
                                    color: Colors.lightBlueAccent,
                                    child: Center(
                                      child: Image.memory(
                                          productImage), //productImage),
                                    ),
                                  ),

这是产品型号：

class Product {
  final String productId;
  final String productName;
  final String brand;
  final String price;
  final String productDescription;
  final String category;
  final bool isPromotion;
  final String vendor;
  final String barcode;
  String imageUrl;
  final Uint8List productImage;
  int minimumStock;
  int availableQuantity;
  int soldQuantity;

  Product(
      {@required this.productId,
      @required this.productName,
      @required this.brand,
      @required this.price,
      @required this.productDescription,
      @required this.category,
      @required this.isPromotion,
      @required this.vendor,
      @required this.barcode,
      @required this.imageUrl,
      @required this.productImage,
      @required this.minimumStock,
      @required this.availableQuantity,
      @required this.soldQuantity});

  Map<String, dynamic> toMap() {
    return {
      'productId': productId,
      'productName': productName,
      'brand': brand,
      'price': price,
      'productDescription': productDescription,
      'category': category,
      'isPromotion': isPromotion,
      'vendor': vendor,
      'barcode': barcode,
      'imageUrl': imageUrl,
      'productImage': jsonEncode(productImage),
      'minimumStock': minimumStock,
      'availableQuantity': availableQuantity,
      'soldQuantity': soldQuantity,
    };
  }

  static Product fromMap(Map<String, dynamic> map) {
    return Product(
      productId: map['productId'],
      productName: map['productName'],
      brand: map['brand'],
      price: map['price'],
      productDescription: map['productDescription'],
      category: map['category'],
      isPromotion: map['isPromotion'],
      vendor: map['vendor'],
      barcode: map['barcode'],
      imageUrl: map['imageUrl'],
      productImage: jsonDecode(map['productImage']),
      minimumStock: map['minimumStock'],
      availableQuantity: map['availableQuantity'],
      soldQuantity: map['soldQuantity'],
    );
  }

  Map<String, dynamic> toFirebase() {
    return {
      'Product Id': productId,
      'Product Name': productName,
      'Brand': brand,
      'Product Price': price,
      'Product Description': productDescription,
      'Product Category': category,
      'isPromotion': isPromotion,
      'Product Vendor': vendor,
      'Code': barcode,
      'Product Picture Url': imageUrl,
      'Minimum Stock': minimumStock,
      'Available Quantity': availableQuantity,
      'SoldQuantity': soldQuantity,
    };
  }

  static Product fromFirebase(Map<String, dynamic> map) {
    return Product(
      productId: map['Product Id'],
      productName: map['Product Name'],
      brand: map['Brand'],
      price: map['Price'],
      productDescription: map['Product Description'],
      category: map['Product Category'],
      isPromotion: map['isPromotion'],
      vendor: map['Product Vendor'],
      barcode: map['Code'],
      imageUrl: map['Product Picture Url'],
      minimumStock: map['Minimum Stock'],
      availableQuantity: map['Available Quantity'],
      soldQuantity: map['Sold Quantity'],
    );
  }

}

Answer 1

问题是 Sembast 会自动 json encoding/decoding 而 json 不支持 Uint8list。我实际上认为作为一个列表它会支持它。在接收读取数据库的状态时打印 Uint8List 值，以及在接收带有拾取图像的状态时打印 Uint8List 值让我觉得一切都很好，因为它们是相同的..读取或保存到时没有错误消息db 也让我觉得一切正常.. 所以要 write/read Uint8List to/from Sembast，它们需要是 base64 coded/decoded..

将模型的 toMap() 更改为：

'productImage': base64Encode(productImage),
//      'productImage': jsonEncode(productImage),

模型的 fromMap 为：

productImage: base64Decode(map['productImage']),
//      productImage: jsonDecode(map['productImage']),

一切正常。希望这会帮助其他刚开始使用 Flutter 的人。干杯

JsonDecoded Uint8List 图像不显示 Flutter

JsonDecoded Uint8List image is not displaying Flutter

flutter

uint8list