Flutter AZURE BLOB 图像上传 - 如何将使用移动摄像头捕获的图像上传到 azure blob 存储

Question

从昨天开始，我一直在努力尝试将使用移动相机从 iOS/Android 设备拍摄的图像上传到 azure blob 存储。

我可以上传文件，但由于某种原因它们已损坏，无法打开上传的图像。

打开上传的图片时请检查图片错误

我正在使用 flutter 包 http，采用不同的方法将图像文件上传到 azure blob 存储，但它以某种方式损坏，我尝试强制ContentType但image/jpeg没有帮助。

这是我正在使用 http API 的代码 -

takePicture() async {
    final pickedFile = await picker.getImage(source: ImageSource.camera);

    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
        String fileName = basename(pickedFile.path);
        uploadFile(fileName, image);
      } else {
        print('No image selected.');
      }
    });
  }

第一种方法 -->

http.Response response = await http.put(
      uri,
      headers: {
        "Content-Type": 'image/jpeg',
        "X-MS-BLOB-TYPE": "BlockBlob",
      },
      body: image.path,
    );
    print(response.statusCode);

使用第二种方法 -->

final data = image.readAsBytesSync();
  var dio = Dio();
  dio.options.headers['x-ms-blob-type'] = 'BlockBlob';
  dio.options.headers['Content-Type'] = 'image/jpeg';
  try {
    final response = await dio.put(
      '$url/$fileName?$token',
      data: data,
      onSendProgress: (int sent, int total) {
        if (total != -1) {
          print((sent / total * 100).toStringAsFixed(0) + "%");
        }
      },
    );
    print(response.statusCode);
  } catch (e) {
    print(e);
  }

方法三-->

var request = new http.MultipartRequest("PUT", postUri);
      request.headers['X-MS-BLOB-TYPE'] = 'BlockBlob';
      request.headers['Content-Type'] = 'image/jpeg';
      request.files.add(
        new http.MultipartFile.fromBytes(
          'picture',
          await image.readAsBytes(),
        ),
      );
      request.send().then((response) {
        uploadResponse.add(response.statusCode);
      }, onError: (err) {
        print(err);
      });

非常感谢这里的帮助。

Answer 1

如果想在flutter应用中将图片上传到Azure Blob Storage，可以使用Dart Packageazblob来实现。关于如何使用该包，请参考这里。

例如

import 'package:image_picker/image_picker.dart';
import 'package:flutter/material.dart';
import 'package:azblob/azblob.dart';
import 'package:mime/mime.dart';

...
//use image_picker to get image

Future uploadImageToAzure(BuildContext context) async {
    try{
      String fileName = basename(_imageFile.path);
      // read file as Uint8List 
      Uint8List content =  await  _imageFile.readAsBytes();
      var storage = AzureStorage.parse('<storage account connection string>');
      String container="image";
      // get the mine type of the file
      String contentType= lookupMimeType(fileName);
      await storage.putBlob('/$container/$fileName',bodyBytes: content,contentType: contentType,type: BlobType.BlockBlob);
      print("done");
    } on AzureStorageException catch(ex){
      print(ex.message);
    }catch(err){
      print(err);
    }