Question

我实现了一项功能，允许用户将文件上传到服务器。

用户在设备上选择了一个文件。如果是图像，则在屏幕上显示预览。并将其上传到服务器。
显示预览时，使用 Image.file() 显示。

但是它太慢了。当我选择多个图像时，应用有时会在绘制预览时崩溃。

在我看来，从文件系统中检索图像似乎消耗了太多资源。
有什么办法吗？

下面的代码是完成工作的构建方法。

  @override
  Widget build(BuildContext context) {
    String mimeStr = lookupMimeType(widget.file.filePathInLoacl);
    String fileType = mimeStr.split('/').first;

    return Consumer<FileUploadController>(
      builder: (context, fileUploadController, child) => Container(
        margin: const EdgeInsets.all(5.0),
        padding: const EdgeInsets.all(3.0),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey[300]),
          borderRadius: BorderRadius.circular(5),
        ),
        child: Row(
          children: [
            if (fileType != 'image')
              Stack(
                children: [
                  CircularProgressIndicator(
                    value: widget.file.uploadPercentage,
                    strokeWidth: widget.file.uploadPercentage == 1 ? 0 : 1,
                  ),
                  Positioned(
                    right: 3,
                    left: 3,
                    top: 3,
                    bottom: 3,
                    child: CircleAvatar(
                      maxRadius: 16,
                      backgroundColor: Colors.white,
                      child: Container(
                        width: 12,
                        height: 13.33,
                        child: getUploadFileIcon(fileType),
                      ),
                    ),
                  ),
                ],
              ),
            if (fileType == 'image')//problem...!!
              Container(
                width: 50,
                height: 50,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Image.file(
                    File(widget.file.filePathInLoacl),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            SizedBox(
              width: 10,
            ),
            Container(
              width: MediaQuery.of(context).size.width * 0.65,
              child: Text(widget.fileName),
            ),
            Spacer(),
            IconButton(
              icon: Icon(Icons.close),
              onPressed: () {
                widget.removeWhenCloseButtonTap(widget.file);
              },
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

您可以尝试使用 image_picker 包。我在一个项目中尝试过它，它没有任何问题。以及显示所选图像的预览。

Image.file() 加载太慢

1 个答案: