Can't upload image to firebase storage VueJs-CodePudding

I am creating site for my store and learning Vue js at the same time. I got stuck in the part of uploading product image to firebase. I get that storageRef.put is not a function. I'm using vue js 3 and firebase 9

uploadImage(e) {
      const file = e.target.files[0];
      const storage = getStorage();
      const storageRef = storageReference(storage, 'products/'   file.name);
      storageRef.put(file);
    }

CodePudding user response：

This syntax you provide is for firebase version 8.

For version 9

import { getStorage, ref, uploadBytes } from "firebase/storage";


uploadImage(e) {
  const file = e.target.files[0];
  const storage = getStorage();

  // Create a reference to 'mountains.jpg'
  const mountainsRef = ref(storage, 'products/'   file.name);

  uploadBytes(storageRef, file).then((snapshot) => {
    console.log('Uploaded!');
  });
}

For more resources.

https://firebase.google.com/docs/storage/web/upload-files#web-version-9