如何从网络上下载图片并将其保存在本地目录中？

Question

我正在尝试从网络下载图像并将其保存在本地计算机的“下载”文件夹中。我需要为 flutter web 实现它，我不确定该怎么做。

我发现了一些关于如何为android和IOS实现下载和保存文件或图像的问题，例如Flutter save a network image to local directory. I also took a look at 。但是，我看不出这些答案对我有什么帮助。

我认为对于 IOS 和 Flutter 我可以使用以下函数而不会出现任何错误，但我不知道文件在我的模拟器中保存的位置：

  void _downloadAndSavePhoto() async {
    var response = await http.get(Uri.parse(imageUrl));

    try {
      Directory tempDir = await getTemporaryDirectory();
      String tempPath = tempDir.path;

      File file = File('$tempPath/$name.jpeg');
      file.writeAsBytesSync(response.bodyBytes);
    } catch (e) {
      print(e.toString());
    }
  }

但是，当我为 flutter web 尝试上述功能时（使用 chrome 模拟器），我收到以下错误：

MissingPluginException(No implementation found for method getTemporaryDirectory on channel plugins.flutter.io/path_provider)

如果有人知道一种方法或有一些实现该功能的建议，我将非常高兴。

提前致谢！

Answer 1

为了实现这一点，我建议您首先将 universal_html 包添加到您的 pubspec.yaml 中，因为在较新版本的 Flutter 中，您会收到导入 dart:html.[= 的警告。 17=]

在pubspec.yaml中：

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.1 // add http
  universal_html: ^2.0.8 // add universal_html

我创建了一个完整的示例 Flutter Web 应用程序，您可以尝试一下，但您唯一感兴趣的是 downloadImage 函数。

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

// if you don't add universal_html to your dependencies you should
// write import 'dart:html' as html; instead
import 'package:universal_html/html.dart' as html;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final imageUrls = <String>[
    'https://images.pexels.com/photos/208745/pexels-photo-208745.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
    'https://images.pexels.com/photos/1470707/pexels-photo-1470707.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
    'https://images.pexels.com/photos/2671089/pexels-photo-2671089.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
    'https://images.pexels.com/photos/2670273/pexels-photo-2670273.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.count(
        crossAxisCount: 3,
        children: imageUrls
            .map(
              (imageUrl) => ImageCard(imageUrl: imageUrl),
            )
            .toList(),
      ),
    );
  }
}

class ImageCard extends StatefulWidget {
  @override
  _ImageCardState createState() => _ImageCardState();

  final String imageUrl;
  ImageCard({
    @required this.imageUrl,
  });
}

class _ImageCardState extends State<ImageCard> {
  Future<void> downloadImage(String imageUrl) async {
    try {
      // first we make a request to the url like you did
      // in the android and ios version
      final http.Response r = await http.get(
        Uri.parse(imageUrl),
      );
      
      // we get the bytes from the body
      final data = r.bodyBytes;
      // and encode them to base64
      final base64data = base64Encode(data);
      
      // then we create and AnchorElement with the html package
      final a = html.AnchorElement(href: 'data:image/jpeg;base64,$base64data');
      
      // set the name of the file we want the image to get
      // downloaded to
      a.download = 'download.jpg';
      
      // and we click the AnchorElement which downloads the image
      a.click();
      // finally we remove the AnchorElement
      a.remove();
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => downloadImage(widget.imageUrl),
      child: Card(
        child: Image.network(
          widget.imageUrl,
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

如何从网络上下载图片并将其保存在本地目录中？

How can I download an image from the network and save it in a locally directory?

flutter

flutter-web