javascript - 尝试将图像上传到 firebase 存储但不断收到错误 : Cannot read property 'name' of undefined

Question

你好，我正在尝试将图像上传到 firebase 存储，但在按照 firebase 官方网站中的所有说明进行操作后，我试图找出这个错误:

未捕获的类型错误:无法读取未定义的属性“名称” 在上传文件(gastro.js:72) 在 HTMLButtonElement.onclick (gastro.html:57)

<div>
  <label class="upload-group">
    <h1>Upload file</h1>
    <input type="file" class="upload-group" id="file">
  </label>
  <button type="button" class="btn btn-primary" name="url[]" id="uploadButton" 
  onclick="uploadFile()">Submit</button>  // second error is here
</div>

var provider = new firebase.auth.GoogleAuthProvider();
var user;
var selectedFile;

function handleFileSelect(event) {
	$(".upload-group").show();
	selectedFile = event.target.files[0];
};


function uploadFile() {
  var filename = selectedFile.name; //first error is here
  var storageRef = firebase.storage().ref('/dogImages/' + filename);
  var uploadTask = storageRef.put(selectedFile);

    // Register three observers:
  // 1. 'state_changed' observer, called any time the state changes
  // 2. Error observer, called on failure
  // 3. Completion observer, called on successful completion
  uploadTask.on('state_changed', function(snapshot){
    // Observe state change events such as progress, pause, and resume
    // 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) {
    // Handle unsuccessful uploads
  }, function() {
    // Handle successful uploads on complete
    // For instance, get the download URL: https://firebasestorage.googleapis.com/...
    uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
      console.log('File available at', downloadURL);
  });
});

}

Answer 1

您的问题是您永远不会填充引用 dom 元素的变量。 你应该确保你的函数 handleFileSelect 在 uploadFile 函数之前被调用

<input type="file" onchange="handleFileSelect(this)" id="file">

但这很容易出错，您很快就会遇到全局变量问题。我建议您改进 handleFileSelect 以返回 dom 节点引用并像那样使用它而不是使用全局变量:

function handleFileSelect() {
    $(".upload-group").show();
    return document.getElementById('file').files[0];
};

function uploadFile() {
  var filename = handleFileSelect().name;