使用Flutter(iOS/Android)将图像上传到Azure Blob [英] Upload image to Azure blob using Flutter (iOS/Android)

问题描述

我们如何将图像(.jpg，.png)上传到Azure blob存储.一开始没有任何见识.

How can we upload images(.jpg, .png) to Azure blob storage. Not getting any insight to start with.

如果您已使用示例，那么很乐意查看并尝试这样做，那么任何可行的示例/URL都将帮助您入门

If you have used example would love to see and try if that is the way to do, any working example/url would help get started with

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

Here is i am trying to upload .jpg file and getting 400 error,

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是一个LIST，其中包含fileName和File路径，这就是我作为字节获取的信息(请参见下图)

image is a LIST and holds the fileName and File path, this is what i get as bytes (see image below)

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

Solved the issue of upload but image is being corrupted now on server -

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 类型的实际图像，具体取决于我要上传的图像类型.但是，当使用应用程序上传时，我用作多部分，这会将存储的文件转换为 multipart/form-data 类型.上载的两种图像jpg/png都提供了如上所述的类型.

There is more to the question, what i noticed is the file uploaded using postman to blob storage are store as actual image of type image/jpeg depending on what type of image i am uploading. But when uploading using application i am using as mutipart which is making th e stored file into of type multipart/form-data. Uploaded both types of image jpg/png both gives type as mentioned above.

[！[在此处输入图片描述] [3]] [3]

[![enter image description here][3]][3]

推荐答案

在此处检查是否使用HTTP

check here if you are using HTTP

如何将图像和文件上传到在Flutter中安装服务器?

如果使用Dio，请检查此代码

check this code if you are using Dio

FormData formData = FormData.from({
"name": "wendux",
"age": 25,
"file": await MultipartFile.fromFile("./text.txt",filename: "upload.txt")
});
response = await dio.post("/info", data: formData);

并检查Dio的文档 https://pub.dev/packages/dio

这是我的一个代码中的一个有效示例

Here is a working example from one of my codes

Future<UploadImageResultModel> uploadImage(File image, String memberToken,
  {String type = "IMAGE"}) async {
var uri = Uri.parse('${Constants.baseUrl}member/UploadImage/$type');
var request = new http.MultipartRequest("POST", uri);

request.headers.addAll({
  "Authentication": memberToken,
});

var stream = new http.ByteStream(DelegatingStream.typed(image.openRead()));
var length = await image.length();
var multipartFile = new http.MultipartFile('file', stream, length,
    filename: image.path.split("/").last);

request.files.add(multipartFile);

var streamedResponse = await request.send();

var response = await http.Response.fromStream(streamedResponse);

if (response.statusCode != 200)
  return UploadImageResultModel.fromJson(json.decode("{}"));

return UploadImageResultModel.fromJson(json.decode(response.body));
}

这篇关于使用Flutter(iOS/Android)将图像上传到Azure Blob的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！