无法上传到 Firebase/FireStorage？答案

【问题标题】：Can't get an upload to Firebase/FireStorage?无法上传到 Firebase/FireStorage？
【发布时间】：2018-11-05 20:29:34
【问题描述】：

我正在尝试（第一次）在 firebase/storage 上上传图片，但收效甚微。

我尝试关注此文档：https://firebase.google.com/docs/storage/web/upload-files

以下代码基于文档底部标题为完整示例的段落。

但是当我期望看到上传的图像时，我只得到一个十字节的文件，这是不可显示的。它显示一个错误：加载预览时出错当我在 Firebase 控制台中单击它时。

自从写了一些东西（使用正确的名称：SoAf.jpg）我知道我没有权限问题。但显然我没有做我应该做的事情来正确上传图片。

如果有人能看出这段代码有什么问题，那就太好了。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="">
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.5/firebase.js"></script>
</head>

<body>

<form action='UpldTest3.html' method='post' enctype='multipart/form-data'>
National flag: <input type='file' accept='image/*' name='photo' id='photo'><br/>
<input type='submit' name='ValNatFlag' style='font-size:20px' value='Submit Picture'><br/>
</form>


<script>
    // Firebase Initialization :
    var config = {
      apiKey: "myyKeyyy",
      authDomain: "......firebaseapp.com",
      databaseURL: "https://......firebaseio.com",
      projectId: "....",
      storageBucket: "........appspot.com",
      messagingSenderId: "........."
    },
    app = firebase.initializeApp(config),
    db = firebase.firestore(app);
</script>

<script>

var file = new File(["fooFOO.jpg"], "SoAf.jpg", {type: "image/jpeg"});

// Create the file metadata
var metadata = {
  contentType: 'image/jpeg'
};

var storageRef = firebase.storage().ref();
// Upload file and metadata to the object 'images/SoAf.jpg'
var uploadTask = storageRef.child('images/' + file.name).put(file, metadata);

// Listen for state changes, errors, and completion of the upload.
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
  function(snapshot) {
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
    switch (snapshot.state) {
      case firebase.storage.TaskState.PAUSED: // or 'paused'
        console.log('Upload is paused');
        break;
      case firebase.storage.TaskState.RUNNING: // or 'running'
        console.log('Upload is running');
        break;
    }
  }, function(error) {

  // A full list of error codes is available at
  // https://firebase.google.com/docs/storage/web/handle-errors
  switch (error.code) {
    case 'storage/unauthorized':
      // User doesn't have permission to access the object
      break;

    case 'storage/canceled':
      // User canceled the upload
      break;

    //...

    case 'storage/unknown':
      // Unknown error occurred, inspect error.serverResponse
      break;
  }
}, function() {
  // Upload completed successfully, now we can get the download URL
  uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log('File available at', downloadURL);
  });
});

</script>

</body>
</html>

【问题讨论】：

标签： javascript firebase firebase-storage

【解决方案1】：

您可以只听文件更改并获取文件

<img src="" id="imgPic" alt="" height="80px">
<input type='file' accept='image/*' name='photo' id='photo'>

这是脚本

var fileToRead = document.getElementById("photo");

fileToRead.addEventListener("change", function(event) {
  var image = document.getElementById("imgPic");
  image.src = URL.createObjectURL(event.target.files[0]) ;
  var tobeSaved = event.target.files[0] // save on storage
}, false);

【讨论】：