Firebase Functions报错：file未定义，文件上传返回500错误求助

开发首个Firebase项目，部署后上传文件持续收到500错误，控制台提示file is not defined。仅前端FormData日志正常输出，后端部分日志无响应。

React组件代码 #

export const GenerateNew = () => {
  const [image, setImage] = useState(null);
  const [style, setStyle] = useState('Gamer');
  const [loading, setLoading] = useState(false);
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const [credits, setCredits] = useState(0);
  const [showCreditAlert, setShowCreditAlert] = useState(false);
  
  const dropdownRef = useRef(null);
  const { currentUser } = useAuth();

  useEffect(() => {
    if (currentUser) {
      const userDocRef = doc(db, 'users', currentUser.uid);
      const unsubscribe = onSnapshot(userDocRef, (docSnapshot) => {
        if (docSnapshot.exists()) {
          const userData = docSnapshot.data();
          setCredits(userData.credits || 0);
        }
      });
      return () => unsubscribe();
    }
  }, [currentUser]);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsDropdownOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const onDrop = useCallback((acceptedFiles) => {
    setImage(acceptedFiles[0]);
  }, []);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: { 'image/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp'] },
    maxFiles: 1,
    disabled: !!image
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!image) {
      alert('Please select an image first.');
      return;
    }
    if (credits === 0) {
      setShowCreditAlert(true);
      return;
    }

    setLoading(true);

    try {
      const formData = new FormData();
      formData.append('image', image);
      formData.append('style', style);

      console.log('FormData content:');
      for (let [key, value] of formData.entries()) {
        console.log(key, value);
      }

      const response = await axios.post(`${API_URL}/generate`, formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
      });

      const generatedImageUrl = response.data.output;

      // Sauvegarder les images dans Firebase Storage
      console.log('start save dans FBS');
      const originalImageRef = ref(storage, `original/${currentUser.uid}/${Date.now()}_${image.name}`);
      console.log('Saved dans FBS');
      await uploadBytes(originalImageRef, image);
      const originalImageUrl = await getDownloadURL(originalImageRef);

      const generatedImageResponse = await fetch(generatedImageUrl);
      const generatedImageBlob = await generatedImageResponse.blob();
      const generatedImageRef = ref(storage, `generated/${currentUser.uid}/${Date.now()}_generated.png`);
      await uploadBytes(generatedImageRef, generatedImageBlob);
      const firebaseGeneratedImageUrl = await getDownloadURL(generatedImageRef);

      // Sauvegarder les informations dans Firestore
      console.log('Save dans FBS');
      const setupsRef = collection(db, 'generatedImages');
      const setupsSnapshot = await getDocs(query(setupsRef, where('userId', '==', currentUser.uid)));
      const setupNumber = setupsSnapshot.size + 1;
      console.log('Saved dans FBS');

      await addDoc(setupsRef, {
        userId: currentUser.uid,
        originalImage: originalImageUrl,
        generatedImage: firebaseGeneratedImageUrl,
        style: style,
        title: `Setup #${setupNumber}`,
        createdAt: new Date()
      });

      // Mettre à jour les crédits de l'utilisateur
      const userRef = doc(db, 'users', currentUser.uid);
      await updateDoc(userRef, { credits: increment(-1) });

      setLoading(false);
      alert('Image generated and saved successfully!');
      
      setImage(null);
      setStyle('Gamer');
    } catch (error) {
      console.error('Error:', error.response ? error.response.data : error.message);
      setLoading(false);
      alert('An error occurred. Please try again.');
    }
  };

  const styles = ['Gamer', 'Aesthetic', 'RGB Free'];

Firebase Functions代码 #

const functions = require('firebase-functions');
const express = require('express');
const multer = require('multer');
const Replicate = require('replicate');
const cors = require('cors');

const app = express();

// Configuration de Multer avec gestion d'erreurs
const upload = multer({
  storage: multer.memoryStorage(),
  limits: { fileSize: 10 * 1024 * 1024 }, // Limite à 10MB
}).single('image');

app.use(cors({ origin: true }));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

const replicate = new Replicate({
  auth: functions.config().replicate.api_token,
});

const styleDescriptions = {
  'Gamer': `Upgrade this setup to create a gaming setup, with aesthetic rgb lights...`,
  'Aesthetic': `Transform this setup into a minimalist and visually pleasing design...`,
  'RGB Free': `Enhance this setup to create a professional and sophisticated environment...`
};

app.post('/generate', (req, res) => {
  console.log('Received generate request');
  
  upload(req, res, async function(err) {
    console.log('On arrive ici');
    if (err) {
      console.error('Upload error:', err);
      return res.status(400).json({ error: 'File upload error', details: err.message });
    }

    console.log('File uploaded successfully');
    console.log('File details:', file ? { originalname: file.originalname, size: file.size } : 'No file');
    console.log('Selected style:', style);

    try {
      const { file } = req;
      const { style } = req.body;

      console.log('File details:', file ? { originalname: file.originalname, size: file.size } : 'No file');
      console.log('Selected style:', style);

      if (!file) {
        return res.status(400).json({ error: 'No image file provided' });
      }

      const styleDescription = styleDescriptions[style] || '';

      console.log('Preparing input for Replicate API');
      const input = {
        image: `data:${file.mimetype};base64,${file.buffer.toString('base64')}`,
        prompt: styleDescription,
        guidance: 3.5,
        num_outputs: 1,
        aspect_ratio: "1:1",
        output_format: "webp",
        output_quality: 80,
        prompt_strength: 0.80,
        num_inference_steps: 28
      };

      console.log('Sending request to Replicate API...');
      const output = await replicate.run(
        "black-forest-labs/flux-dev",
        { input }
      );

      console.log('Replicate API response received');
      res.json({ output: output[0] });
    } catch (error) {
      console.error('Error in generate function:', error);
      res.status(500).json({ error: 'An error occurred while generating the image', details: error.message });
    }
  });
});

// Export the Express app as a Firebase Cloud Function
exports.api = functions.https.onRequest(app);

问题原因 #

在Firebase Functions的/generate路由处理逻辑中，在解构req.file和req.body.style之前，就提前使用了file和style变量，导致变量未定义触发ReferenceError，中断后续代码执行，所以后端后续日志无法输出，最终返回500错误。

具体触发错误的代码段：

console.log('File details:', file ? { originalname: file.originalname, size: file.size } : 'No file');
console.log('Selected style:', style);

此时file和style还未被声明或赋值，直接访问会抛出未定义错误。

解决方案 #

调整代码顺序，先解构获取file和style变量，再执行相关日志打印和业务逻辑，修改后的Firebase Functions代码如下：

const functions = require('firebase-functions');
const express = require('express');
const multer = require('multer');
const Replicate = require('replicate');
const cors = require('cors');

const app = express();

// Configuration de Multer avec gestion d'erreurs
const upload = multer({
  storage: multer.memoryStorage(),
  limits: { fileSize: 10 * 1024 * 1024 }, // Limite à 10MB
}).single('image');

app.use(cors({ origin: true }));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

const replicate = new Replicate({
  auth: functions.config().replicate.api_token,
});

const styleDescriptions = {
  'Gamer': `Upgrade this setup to create a gaming setup, with aesthetic rgb lights...`,
  'Aesthetic': `Transform this setup into a minimalist and visually pleasing design...`,
  'RGB Free': `Enhance this setup to create a professional and sophisticated environment...`
};

app.post('/generate', (req, res) => {
  console.log('Received generate request');
  
  upload(req, res, async function(err) {
    console.log('On arrive ici');
    if (err) {
      console.error('Upload error:', err);
      return res.status(400).json({ error: 'File upload error', details: err.message });
    }

    console.log('File uploaded successfully');
    // 先解构变量，再使用
    const { file } = req;
    const { style } = req.body;

    console.log('File details:', file ? { originalname: file.originalname, size: file.size } : 'No file');
    console.log('Selected style:', style);

    try {
      if (!file) {
        return res.status(400).json({ error: 'No image file provided' });
      }

      const styleDescription = styleDescriptions[style] || '';

      console.log('Preparing input for Replicate API');
      const input = {
        image: `data:${file.mimetype};base64,${file.buffer.toString('base64')}`,
        prompt: styleDescription,
        guidance: 3.5,
        num_outputs: 1,
        aspect_ratio: "1:1",
        output_format: "webp",
        output_quality: 80,
        prompt_strength: 0.80,
        num_inference_steps: 28
      };

      console.log('Sending request to Replicate API...');
      const output = await replicate.run(
        "black-forest-labs/flux-dev",
        { input }
      );

      console.log('Replicate API response received');
      res.json({ output: output[0] });
    } catch (error) {
      console.error('Error in generate function:', error);
      res.status(500).json({ error: 'An error occurred while generating the image', details: error.message });
    }
  });
});

// Export the Express app as a Firebase Cloud Function
exports.api = functions.https.onRequest(app);

额外优化建议 #

• 前端发送请求时，无需手动设置Content-Type: multipart/form-data，axios会自动根据FormData生成正确的请求头，避免手动设置导致的边界符问题。修改前端请求代码：

  const response = await axios.post(`${API_URL}/generate`, formData);
  

• 部署修改后的Functions后，通过firebase functions:log查看实时日志，方便排查后续问题。

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