Vue3组合式API实现Firebase Storage文件上传并将URL存入Firestore

你的代码核心问题有两个：一是上传函数未返回Promise，内部resolve无效导致拿不到URL；二是没有将获取到的URL绑定到表单数据中，提交时自然无法携带。以下是具体修正步骤：

1. 重构上传函数为Promise类型 #

让上传函数返回Promise，这样可以在表单提交时等待上传完成并拿到URL：

import { getStorage, ref as stRef, uploadBytesResumable, getDownloadURL } from "firebase/storage";

const uploadTaskPromise = (e) => {
  return new Promise((resolve, reject) => {
    const file = e.target.files[0];
    if (!file) {
      reject(new Error("未选择文件"));
      return;
    }
    
    const storage = getStorage();
    const metadata = {
      contentType: 'image/jpeg'
    };
    
    // 用时间戳+原始文件名生成唯一标识，避免同名文件覆盖
    const uniqueFileName = `${Date.now()}_${file.name}`;
    const storageRef = stRef(storage, `products/${uniqueFileName}`);

    const uploadTask = uploadBytesResumable(storageRef, file, metadata);

    uploadTask.on('state_changed',
      (snapshot) => {
        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log(`上传进度：${progress}%`);
        switch (snapshot.state) {
          case 'paused':
            console.log('上传已暂停');
            break;
          case 'running':
            console.log('上传中');
            break;
        }
      }, 
      (error) => {
        console.error('上传失败', error);
        reject(error);
        switch (error.code) {
          case 'storage/unauthorized':
            console.log('无Storage访问权限');
            break;
          case 'storage/canceled':
            console.log('上传已取消');
            break;
          case 'storage/unknown':
            console.log('未知错误');
            break;
        }
      }, 
      () => {
        getDownloadURL(uploadTask.snapshot.ref)
          .then((downloadURL) => resolve(downloadURL))
          .catch(reject);
      });
  });
}

2. 绑定URL到表单数据 #

在Vue3组件中定义响应式变量存储表单数据，将上传得到的URL存入其中：

import { ref } from 'vue';

// 定义表单数据，包含其他字段和图片URL
const formData = ref({
  title: '',
  price: '',
  imgUrl: ''
});

// 修改文件选择事件处理逻辑
const handleFileChange = async (e) => {
  try {
    const imgUrl = await uploadTaskPromise(e);
    formData.value.imgUrl = imgUrl;
  } catch (err) {
    console.error('获取图片URL失败', err);
  }
}

对应模板修改：

<input @change="handleFileChange" class="file-input" type="file" name="file">

3. 提交表单时携带URL #

提交到Firestore时，直接传入包含imgUrl的表单数据：

import { getFirestore, collection, addDoc } from "firebase/firestore";

const db = getFirestore();

const submitForm = async () => {
  try {
    await addDoc(collection(db, "products"), {
      ...formData.value,
      createdAt: new Date() // 可额外添加时间字段
    });
    console.log('表单提交成功');
  } catch (err) {
    console.error('提交失败', err);
  }
}

额外提示 #

• 建议添加文件类型校验，只允许上传jpg/png等图片格式
• 可根据上传进度显示进度条，优化用户体验
• 若需批量上传，可扩展函数支持多文件处理

内容的提问来源于stack exchange，提问作者bahy llam