如何在前端将文件上传至Cloudinary指定文件夹？Next.js报错解决

问题场景 #

原本代码可正常将图片上传至Cloudinary根目录，但添加formData.append('folder', 'store');指定上传文件夹后，出现签名验证错误：

Invalid Signature my_signature . String to sign -'folder=store&timestamp=1687379533'.

问题原因 #

Cloudinary的签名机制要求：签名必须包含所有上传请求中用到的自定义参数（除file、api_key等无需签名的参数）。当前后端生成签名时只传入了timestamp，没有包含folder参数，导致后端生成的签名和Cloudinary验证时用的参数（folder+timestamp）不匹配，触发签名无效错误。

解决方案 #

需要修改后端签名生成逻辑，将folder参数纳入签名计算，同时前端调用签名接口时需传递目标文件夹名称。

1. 修改后端API代码 #

更新签名生成接口，接收前端传来的folder参数，并将其加入签名计算的参数列表：

import { NextApiRequest, NextApiResponse } from "next"
import cloudinary from "cloudinary"

const cloud = cloudinary.v2

export default async function controller(req: NextApiRequest, res: NextApiResponse) {
    try {
        const { folder } = req.query;
        const timestamp = Math.round((new Date).getTime() / 1000);
        // 将folder参数加入签名计算
        const signature = cloud.utils.api_sign_request(
            { timestamp, folder },
            process.env.API_SECRET as string
        );
        const api_key = process.env.API_KEY
        res.status(200).json({ signature, timestamp, api_key });
    } catch (error) {
        res.status(400).json(`Error==>${error}`);
    }
}

2. 修改签名接口调用代码 #

更新前端获取签名的函数，支持传递folder参数：

export const getCloudinarySignature = async (folder: string) => {
    const data = await axios.get(`/api/cloudnarysignature?folder=${folder}`)
    return data.data
}

3. 修改前端上传代码 #

调用签名接口时传入目标文件夹名称，并保持formData中的folder参数：

import * as api from '@/helpers/api'
import axios from 'axios';

const url = "https://api.cloudinary.com/v1_1/cloud_name/auto/upload"
const targetFolder = 'store';
// 传入folder参数获取匹配的签名
const { signature, timestamp, api_key } = await api.getCloudinarySignature(targetFolder)

const formData = new FormData();
formData.append('file', imageData[0]);
formData.append('signature', signature);
formData.append('timestamp', timestamp);
formData.append('api_key', api_key);
formData.append('folder', targetFolder);

const response = await axios.post(url, formData);

原理说明 #

Cloudinary验证签名时，会提取上传请求中的folder和timestamp参数，结合你的API_SECRET重新计算签名，只有和你传递的签名完全一致时，才会允许上传。因此必须保证后端生成签名时的参数，和前端上传时的参数完全对应。

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