使用 Firebase 和 Vue 进行文件上传

Question

Firebase 是一个简单的后端来存储上传的文件，它与 Vue 配合得很好。
你可以 npm install firebase firebase-storage或使用 CDN。
你需要 firebase-storage包来存储文件。
如果要禁用身份验证，则需要更改存储规则，如下所示：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

To:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != true;
    }
  }
}

完成后，您可以修改 本文 如下所示：

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-storage.js"></script>
<script>
  const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: "",
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>
<div></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
  const app = new Vue({
    data: () => ({ File: null, value: null, preview: null, isPic: false }),
    template: `
      <div style="border-style:solid">
        <input type="file" @change="getFile()"/>
        <button @click="submitFile">Upload!</button>
        <div v-if="!isPic">
        {{preview}}
        </div>
        <div v-else>
        <img :src="preview" style="width:75%"/>
        </div>
      </div>
    `,
    methods: {
      getFile() {
        this.File = event.target.files[0];
        this.preview = null;
        this.isPic = false;
        if (
          this.File.name.includes(".png") ||
          this.File.name.includes(".jpg")
        ) {
          this.isPic = true;
        }
      },
      submitFile() {
        const storage = firebase.storage().ref().child(`${this.File.name}`);
        const storageRef = storage.put(this.File);
        setTimeout(() => {
          storage.getDownloadURL().then((res) => (this.preview = res));
        }, 3000);
      },
    },
  });
  app.$mount("#content");
</script>