通过HTTP Post将图片上传到firebase存储

Question

我想把一张图片上传到flutter web应用中的firebase存储中.目前我所做的。

• 通过云端函数接收一个签名的URL，如这里所说的那样 谷歌指南。创建签名的URL - 文末
• 通过flutter包 "image_picker_web "从本地文件加载图片。包装-链接
• 选择器提供了(Imag-)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;
}