入力フィールドからfirebase cloud storageに画像をアップロードするには？

Question

私は、アップロードする画像をユーザーが選択できる入力フィールドを持っており、その後クラウドストレージに送信する必要があります。問題は、選択したファイルを取得する方法がわかりません。 this、this、thisなど多くの質問がありました。私が見た質問のほとんどは、thisのように、アップロードする前に画像をプレビューするよう求めています。私はイメージをプレビューする必要はないと思う、私はちょうどそれをアップロードしたい。これはどうすればいいですか？

function addImage() { 
    $("#addImage").append('\ 
    <input type="file" id="image" accept="image/*">\ 
    <button type="submit">ok</button>\ 
    <button onclick="cancelAddImage()">cancel</button>'); 
    $("#addImage").submit(function() { 
    var image = $("#image").files; 
    console.log(image); 
    storage.ref("images").put(image).then(function(snapshot) { 
     console.log('Uploaded a file!'); 
    }); 
    }); 
} 

にconsole.log（）このため、 "未定義" 与えている：ここに私の現在のコードです。私も.files;の代わりに.files[0]を試しました。

Answer 1

あなたのHTMLコードでは、入力フィールドにidを付けます。たとえば、あなたがカメラから画像をアップロードする場合：

<input type="file" accept="image/*" capture="camera" id="cameraInput"> 

次に、あなたのJSコードで、あなたがこの要素上のイベントを変更するに耳を傾けます：もちろん

let storageRef = firebase.storage().ref('photos/myPictureName') 
    let fileUpload = document.getElementById("cameraInput") 

    fileUpload.addEventListener('change', function(evt) { 
     let firstFile = evt.target.files[0] // upload the first file only 
     let uploadTask = storageRef.put(firstFile) 
    }) 

あなたが持っている必要がありますどういうわけかFirebase jsライブラリが含まれていました。

jsの古いバージョンで書き込む場合は、letをvarとaddで置き換える必要もあります。あなたのラインの終わりに。