如何从Next.js前端批量上传图片至Strapi媒体库？

首先你遇到的console.log(uploadData)显示为空的问题，是因为FormData是特殊对象，直接打印看不到内部内容。你可以用下面的方式查看实际内容：

// 遍历FormData查看键值对
for (let [key, value] of uploadData.entries()) {
  console.log(key, value);
}

接下来是完整的批量上传实现方案：

1. 正确构建上传逻辑 #

在Next.js组件里可以这么写：

import { useState } from 'react';

const BatchImageUpload = () => {
  const [selectedFiles, setSelectedFiles] = useState(null);

  const handleFileSelect = (e) => {
    setSelectedFiles(e.target.files);
  };

  const handleBatchUpload = async () => {
    if (!selectedFiles) return;

    const formData = new FormData();
    // Strapi上传接口默认接受的字段名是`files`，不是你之前写的`images[]`
    for (let i = 0; i < selectedFiles.length; i++) {
      formData.append('files', selectedFiles[i], selectedFiles[i].name);
    }

    try {
      const response = await fetch('http://你的Strapi地址/api/upload', {
        method: 'POST',
        headers: {
          // 若Strapi开启了认证，需带上Token
          // 'Authorization': `Bearer ${你的用户Token}`,
        },
        body: formData,
        // 不要手动设置Content-Type，浏览器会自动添加正确的multipart/form-data边界标识
      });

      const result = await response.json();
      console.log('上传成功:', result);
    } catch (error) {
      console.error('上传失败:', error);
    }
  };

  return (
    <div>
      <input type="file" multiple onChange={handleFileSelect} />
      <button onClick={handleBatchUpload}>批量上传到Strapi媒体库</button>
    </div>
  );
};

export default BatchImageUpload;

2. 核心注意事项 #

• 字段名要正确：Strapi的上传接口默认接收files作为字段名，不是自定义的images[]，这是之前代码的核心问题。
• 请求头别乱设：手动设置Content-Type: multipart/form-data会导致上传失败，浏览器会自动处理这个头并添加必要的边界信息。
• Strapi权限配置：要在Strapi后台的「设置→角色与权限」里，给对应角色（比如public或认证用户）开启Upload插件的create权限，否则接口会返回403。
• 跨域处理：如果Next.js和Strapi不在同一域名下，需要在Strapi的config/middlewares.js里配置CORS，允许Next.js的域名访问。

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