时间戳

首页 > 解决方案 > 使用 Flutter (iOS/Android) 将图像上传到 Azure blob

flutter - 使用 Flutter (iOS/Android) 将图像上传到 Azure blob

问题描述

我们如何将图像（.jpg、.png）上传到 Azure blob 存储。开始时没有任何见解。

如果您使用过示例，很想看看并尝试这样做，任何有效的示例/网址都将有助于开始

这是我正在尝试上传 .jpg 文件并收到 400 错误，

image.forEach((element) async {
    ImageDetailsUpload result = ImageDetailsUpload.fromJson(element);
    var postUri = Uri.parse('$url/${result.fileName}?$code'); //Azure blob url
    var request = new http.MultipartRequest("PUT", postUri); //Put method
    request.files.add(
      new http.MultipartFile.fromBytes(
        'file',
        await File.fromUri(Uri.parse(result.path)).readAsBytes(),
      ),
    );
    request.send().then((response) {
      print(response.statusCode);
    }, onError: (err) {
      print(err);
    });
  });

图像是一个列表并保存文件名和文件路径，这是我得到的字节（见下图）

在此处输入图像描述

解决了上传问题，但现在服务器上的图像已损坏 -

image.forEach((element) async {
    ImageDetailsUpload result = ImageDetailsUpload.fromJson(element);
    var postUri = Uri.parse('$url/${result.fileName}?$code');
    var request = new http.MultipartRequest("PUT", postUri);
    request.headers['X-MS-BLOB-TYPE'] = 'BlockBlob';

    request.files.add(
      new http.MultipartFile.fromBytes(
        'file',
        await File.fromUri(Uri.parse(result.path)).readAsBytes(),
      ),
    );
    request.send().then((response) {
      print(response.statusCode);
    }, onError: (err) {
      print(err);
    });
  });

这似乎困扰着我。

还有更多问题，我注意到使用邮递员上传到 blob 存储的文件存储为类型的实际图像，image/jpeg具体取决于我上传的图像类型。但是当使用应用程序上传时，我使用的是 mutipart，它使存储的文件成为 type multipart/form-data。上传两种类型的图像 jpg/png 都给出了上面提到的类型。 在此处输入图像描述

[![在此处输入图像描述][3]][3]

标签： flutterdart

解决方案

首先，将图像转换File为Stream数据将以流的形式推送到 blob 容器。

Future uploadImage(File file) async {
    String fileName = file.path.split('/').last;
    _logger.info("File Path: " + fileName);

    String imageToken = "Get your own token";
    String containerName = "Blob container name";


    final fileBytes = file.readAsBytesSync();
    var streamData = Stream.fromIterable(fileBytes.map((e) => [e]));
    String uploadDestinationUrl = RollaConstants.HOST_IMAGE +
        "/$containerName" +
        "/$fileName" +
        imageToken;


    final Dio _dio = Dio();
    Response response;
    try {
      response = await _dio.put(uploadDestinationUrl,
          data: streamData,
          options: Options(headers: {
            Headers.contentLengthHeader: fileBytes.length,
            "x-ms-blob-type": "BlockBlob",
            "content-type": "image/jpeg"
          }));
    } catch (error, stacktrace) {
      print("Exception occured: $error.response stackTrace: $stacktrace");
    }
    print("Blob response: " + response.statusCode.toString());
  }

推荐阅读