通过 HTTP Post 将图像上传到 Firebase 存储

Question

我想在 Flutter Web 应用程序中将图像上传到 Firebase 存储中。 到目前为止我做了什么：

• 通过云功能接收签名URL；如此处所述Google guideline: Create signed URL - 在文章底部
• 通过flutter包“image_picker_web”从本地文件加载图片Package-Link
• 选择器提供 (Image-)Widget、Uint8List、html.File
• 尝试通过 MultipartRequest 将图像上传到 signedURL，但收到错误：XMLHttpRequest error，但没有任何进一步的详细信息。

我的 MultipartRequest 代码（Uint8List 类型的字节）：

var multipartFile = http.MultipartFile.fromBytes(
  'image', bytes, filename: 'test.jpeg', // optional
  contentType: new MediaType('image', 'jpeg'),
);
var uri = Uri.parse(url);
var request = http.MultipartRequest("POST", uri)
  ..files.add(multipartFile);
var response = await request.send();
if (response.statusCode == 200) print('Uploaded!');
response.stream.transform(utf8.decoder).listen((value) {
    print(value);
  });

...我也尝试过使用流：

var stream = http.ByteStream.fromBytes(bytes);
var multipartFile = new http.MultipartFile('file', stream, bytes.length,
      filename: 'test.jpeg', contentType: new MediaType('image', 'jpeg'));

我认为图像数据/类型 (MultipartFile) 有问题，或者 url 不起作用或完整的 MultipartRequest 不符合 firebase 存储

有人对此有解决方案吗？或者我该如何进一步调查这个问题？

Answer 1

如果您检查浏览器控制台，您很可能会收到 CORS 错误。

有一种更好的方法可以将图片上传到 Firebase，这里是上传图片的代码，并接收存储图片的 URL。

import 'dart:async';
import 'package:firebase/firebase.dart' as fb;
import 'dart:html' as html;

String url;

Future<String> uploadProfilePhoto(html.File image, {String imageName}) async {
  try {
    //Upload Profile Photo
    fb.StorageReference _storage = fb.storage().ref('displayPhotos/$imageName');
    fb.UploadTaskSnapshot uploadTaskSnapshot = await _storage.put(image).future;
    // Wait until the file is uploaded then store the download url
    var imageUri = await uploadTaskSnapshot.ref.getDownloadURL();
    url = imageUri.toString();
  } catch (e) {
    print(e);
  }
  return url;
}