如何在Nuxt项目中将SVG图片上传至Firestore？

问题场景 #

在Nuxt项目中实现SVG图片上传至Firestore功能时，直接将File对象存入文档字段触发以下错误：

FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: a custom File object (found in field heroImage in document heroPage/admin)

原代码片段：

export default {
  name: 'IndexPage',
  data() {
    return {
      image: null,
      heroTitle: '',
      heroSubtitle: '',
    }
  },

  methods: {
    async postData() {
      try {
        await this.$fire.firestore.collection('heroPage').doc('admin').set({
          heroTitle: this.heroTitle,
          heroSubtitle: this.heroSubtitle,
          heroImage: this.image,
        })
      } catch (e) {
        console.log(e)
      }
    },
  },
}

问题原因 #

Firestore不支持直接存储原生File对象，需先将SVG文件上传至Firebase Storage，再把文件的下载URL存入Firestore文档对应字段。

解决步骤及代码实现 #

1. 新增文件上传至Storage的方法，获取下载URL
2. 修改postData方法，先完成文件上传拿到URL，再写入Firestore

完整代码示例：

export default {
  name: 'IndexPage',
  data() {
    return {
      image: null,
      heroTitle: '',
      heroSubtitle: '',
    }
  },

  methods: {
    // 上传文件到Firebase Storage并返回下载URL
    async uploadFileToStorage(file) {
      if (!file) return null;
      // 生成唯一文件名，避免覆盖
      const fileName = `hero-svg/${Date.now()}-${file.name}`;
      // 创建Storage引用
      const storageRef = this.$fire.storage.ref(fileName);
      // 上传文件
      await storageRef.put(file);
      // 获取下载URL
      return storageRef.getDownloadURL();
    },

    async postData() {
      try {
        // 先上传SVG文件，拿到下载URL
        const heroImageUrl = await this.uploadFileToStorage(this.image);
        
        // 将URL存入Firestore
        await this.$fire.firestore.collection('heroPage').doc('admin').set({
          heroTitle: this.heroTitle,
          heroSubtitle: this.heroSubtitle,
          heroImage: heroImageUrl,
        });
        
        console.log('数据上传成功');
      } catch (e) {
        console.error('上传失败:', e);
      }
    },
  },
}

额外说明 #

• 确保已在Nuxt项目中正确配置Firebase Storage，开发阶段可临时设置宽松规则，生产环境需根据需求限制上传权限
• 若需要限制文件类型，可在uploadFileToStorage方法中添加校验，比如判断file.type === 'image/svg+xml'

内容的提问来源于stack exchange，提问作者Rustam Ravshanovich