如何将Firebase生成的downloadUrl与其他数据存入Mongoose数据库？

核心问题分析 #

当前流程中客户端仅将本地生成的filename存入数据库，并未获取服务端返回的Firebase文件downloadUrl，导致数据库缺少可直接访问的文件链接。以下是两种落地方案：

方案1：修改现有流程，分两次请求完成（最小改动） #

客户端代码修正

接收服务端返回的downloadUrl，替换原有的filename存入帖子数据：

const handleSubmit = async (e) => {
    e.preventDefault();
    const newPost = {
        username: user.username,
        userId: user._id,
        title,
        desc,
    };
    if(file){
        const data = new FormData();
        const chance = new Chance();
        const randomString = chance.string({ length: 20});
        const filename = Date.now() + randomString;
        data.append("name", filename);
        data.append("file", file);
        try {
            // 修正接口路径，与服务端保持一致，获取downloadUrl
            const uploadRes = await axios.post("/server/upload", data);
            // 将Firebase返回的可访问URL赋值给帖子的photo字段
            newPost.photo = uploadRes.data.downloadUrl;
        } catch(err){
            console.error(err);
            // 文件上传失败时终止流程，避免创建无附件的帖子
            return;
        }
    }
    try {
        const res = await axios.post('/posts', newPost);
        window.location.replace("/post/" + res.data._id);
    } catch(err){
        console.error(err);
    }
}

服务端无需额外修改

确保/server/upload接口返回的downloadUrl格式正确即可，当前代码已满足需求。

方案2：合并接口，一次请求完成（更高效） #

将文件上传与帖子创建合并为一个接口，减少HTTP请求次数：

服务端（post.js）新增合并接口

// 需提前引入upload中间件和uploadFileToFirebase函数
router.post("/with-file", upload.single('file'), async(req, res) => {
    try {
        let downloadUrl = null;
        if(req.file){
            // 上传文件到Firebase并获取下载链接
            downloadUrl = await uploadFileToFirebase(req.file);
        }
        // 构造帖子数据，注入downloadUrl
        const postData = {
            ...req.body,
            photo: downloadUrl
        };
        const newPost = new Post(postData);
        const savedPost = await newPost.save();
        res.status(200).json(savedPost);
    } catch(err){
        console.log(err);
        res.status(500).json(err);
    }
})

客户端对应修改

const handleSubmit = async (e) => {
    e.preventDefault();
    const data = new FormData();
    // 添加帖子基础字段
    data.append("username", user.username);
    data.append("userId", user._id);
    data.append("title", title);
    data.append("desc", desc);
    // 添加文件（如果有）
    if(file){
        const chance = new Chance();
        const randomString = chance.string({ length: 20});
        const filename = Date.now() + randomString;
        data.append("name", filename);
        data.append("file", file);
    }
    try {
        const res = await axios.post('/posts/with-file', data);
        window.location.replace("/post/" + res.data._id);
    } catch(err){
        console.error(err);
    }
}

前置检查 #

确保Mongoose的Post模型中包含photo字段，类型设置为String，示例：

const postSchema = new mongoose.Schema({
    // 其他字段...
    photo: {
        type: String,
        default: null
    }
});

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