嗨，我来帮你一步步解决这两个问题，先从你在Nuxt项目里遇到的上传空表单问题说起：

解决Nuxt中vue-ckeditor5上传空表单的问题 #

你遇到的空表单问题主要有两个核心原因：

1. 错误手动设置了Content-Type头：当使用fetch发送FormData时，浏览器会自动生成包含正确boundary的Content-Type，手动设置反而会导致边界标识不匹配，服务器无法正确解析表单数据。
2. 没有正确获取文件对象：this.loader.file返回的是一个Promise，不是直接的File对象，直接把它添加到FormData里只会传入Promise对象，而非实际的文件内容。

下面是修改后的UploadAdapter代码：

UploadAdapter: async function (loader) {
  this.loader = loader
  this.upload = async () => {
    // 先通过await获取实际的文件对象
    const file = await this.loader.file;
    const body = new FormData();
    // 添加文件字段
    body.append('file', file);

    return fetch('http://localhost:8000/api/imageUpload', {
      headers: {
        // 移除手动设置的Content-Type，让浏览器自动处理
        'Accept': 'application/json'
      },
      body: body,
      method: 'post'
    })
    .then(response => {
      // 先判断响应状态是否正常
      if (!response.ok) {
        throw new Error('上传请求失败，请检查服务器状态');
      }
      return response.json();
    })
    .then(downloadUrl => {
      return { default: downloadUrl }
    })
    .catch(error => {
      console.error('上传出错:', error);
      throw error; // 抛出错误让CKEditor显示上传失败状态
    });
  }
  this.abort = () => {
    console.log('Abort upload.')
  }
}

关键修改说明：

• 使用async/await获取loader.file的实际文件对象，确保FormData里添加的是真实文件
• 移除了手动设置的Content-Type头，让浏览器自动处理表单的边界标识，保证服务器能正确解析
• 增加了响应状态检查，方便快速排查服务器端的问题

为CKEditor5 UploadAdapter设置多份form-data #

要添加多份form-data非常简单，只需要在创建FormData对象后，多次调用body.append()方法即可，每一次调用对应一个表单字段：

// 在之前的代码基础上，添加更多表单字段
const body = new FormData();
body.append('file', file);
// 添加额外的文本字段
body.append('article_id', '1001');
body.append('upload_type', 'editor_image');
// 如果需要上传多个文件，也可以重复append同一个字段名
body.append('files', anotherFile);

服务器端可以根据字段名获取对应的值，多个同名字段通常会以数组形式返回（具体取决于后端框架的处理逻辑）。

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