Question

我正在尝试将图像上传到 Firebase存储。当我在 Mozilla Firefox 上尝试使用它时，它会向我显示错误：

未捕获的异常：对象

但是当我在Google Chrome浏览器上尝试显示以下内容：未定义。有人可以帮忙吗？

alert('upload js is working');

function imageUpload(){
const ref = firebase.storage().ref();
const file = $('#avatar').get(0).files[0];
const name = 'user_' + $( "#userid" ).val() + '_' + (+new Date());
const task = ref.child(name).put(file);
task.then((snapshot) => {console.log(snapshot.downloadURL);});
 task
    .then((snapshot) => {
      document.querySelector('#someImageTagID').src = snapshot.downloadURL;
    })
    .catch((error) => {
      // A list of errors can be found 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
          break;
      }
    })
}

我也尝试过：

    alert('upload js is working');

    function imageUpload(){
      var openFile = function(event) {
        var input = event.target;

        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('avatar');
          output.body.style.backgroundImage = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
      };


    // Create a root reference
    var storageRef = firebase.storage().ref();

    // File or Blob named mountains.jpg
    var file = openFile;

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

    // Upload file and metadata to the object 'images/mountains.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);
      });
    });

    }

但它显示以下内容：

ReferenceError：未定义storageRef

Answer 1

有最终调整的代码版本：

    document.querySelector('#avatar').addEventListener('change', function() {

  var reader = new FileReader();
  reader.onloadend = function() {
  var ref = firebase.storage().ref();
   var arrayBuffer = reader.result;
   var array = new Uint8Array(arrayBuffer);
   var task = ref.child('image').put(array);  
  task
    .then((snapshot) => {
      snapshot.ref.getDownloadURL().then(url => {        
        document.querySelector('#someImageTagID').src = url;

      });
    })
    .catch((error) => {
      // A list of errors can be found 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
          break;
      }
    })
}

      reader.readAsArrayBuffer(this.files[0]);

    }, false);

请查看Firebase文档https://firebase.google.com/docs/storage/web/upload-files。

未捕获的异常：对象尝试将图像上传到firebase时

1 个答案: