Question

我正在尝试使用Firebase来存储事件列表。每个事件都有典型的信息名称，日期，位置和图像。我尝试使用文件api将dataurl与其余数据存储在一个引用中，但我似乎无法在与所有其他数据相同的密钥下获取图像。如何通过表格添加上传图片，其中包含Firebase中名称ID下的所有其他数据。

这是文件上更改事件的处理程序。

function onFileChanged(theEvt) {
    var theFile = theEvt.target.files[0];

    // check to see if it is text
    if (!theFile.type.match("image.*")) {
        return;
    }

    var reader = new FileReader();

    reader.onload = function (evt) {
        var resultdata = evt.target.result;
        var file = theFile.name.replace(/\.[^\.]+$/, '');

        nameRef = new Firebase('https://firebaseio.com/events/' + file);
        var f = nameRef.child('image');
        f.set(resultdata);
    }

    reader.readAsDataURL(theFile);
}

Answer 1

只要文件表示为数据URL（Base64编码），该代码段就可以正常工作。以下是我们在一个示例应用程序中执行此操作的示例：https://github.com/firebase/firepano/blob/gh-pages/firepano.js - 代码大致相同，只是此代码段为文件生成随机ID，而不是从文件名中提取它。

function handleFileSelect(evt) {
  var f = evt.target.files[0];
  var reader = new FileReader();
  reader.onload = (function(theFile) {
    return function(e) {
      var filePayload = e.target.result;
      var hash = CryptoJS.SHA256(Math.random() + CryptoJS.SHA256(filePayload));
      var f = new Firebase(firebaseRef + 'pano/' + hash + '/filePayload');
      spinner.spin(document.getElementById('spin'));
      f.set(filePayload, function() {
        spinner.stop();
        document.getElementById("pano").src = e.target.result;
        $('#file-upload').hide();
        window.location.hash = hash;
      });
    };
  })(f);
  reader.readAsDataURL(f);
}

如何使用表单中的其他数据存储图像？

1 个答案: