Question

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

我使用ImagePicker和ImagePickerWeb选择产品表的图片，并且由于我需要Web和设备应用程序版本的通用格式，因此我将Uint8List用作选择的图像。然后将其上传到Firebase存储（所有工作正常），并返回downloadUrl。然后，该产品既可以保存到Sembast（用于本地库存）中，也可以保存到Firebase中，以用于电子商务产品搜索。

要保存选中的Uint8List，我在jsonEncode模型的方法中使用toMap()中的jsonDecode和fromMap()中的NewEditProductScreen。现在的问题是，在Image.memory(imageData)上显示选择的图像时， ProductScreen可以正常工作，将产品加载到Image.memory(productImage)中时，未显示用jsonEncode显示的图像。与编码之前一样，图像按预期显示，但是在编码/解码之后，我猜想jsonDecode和if (state is PickedImage) { setState(() { imageData = state.imageData; print(' ###### Uint8List picked image is: ${state.imageData}'); }); }在Uint8List上不能很好地工作吗？我还能尝试将Uint8List保存为sembast吗？我尝试不对其进行解码/编码，但是这样做没有帮助。

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,
                              ),
                            ),
                          ),
                        ]),
                      ),

NewEditProductScreen显示它：

                  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}');
                  });
                }

ProductsScreen加载了选定的产品状态：

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'],
    );
  }

}

这是产品型号：

{{1}}

Answer 1

问题是Sembast自动执行json编码/解码，而json不支持Uint8list。我实际上认为，作为列表可以支持它。在接收到读取db的状态时打印Uint8List值，以及在接收到带有拾取图像的状态时打印Uint8List值，从某种意义上讲，我感觉一切都很好，因为它们是相同的..读取或保存到时没有错误消息db也使我觉得一切正常。所以要向/从Sembast写入/读取Uint8List，它们需要进行base64编码/解码。

将模型的toMap（）更改为：

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

和模型的fromMap为：

.wasm

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

JsonDecoded Uint8List图像未显示Flutter

1 个答案: