如何在TinyMCE的images_upload_handler中附带其他POST数据

嘿，这事儿其实超简单！你已经用到FormData来处理图片文件了，只要继续用FormData.append()方法，就能把任意额外数据加到POST请求里。

具体操作步骤： #

• 在你创建formData对象之后，直接调用append()方法添加需要的键值对，比如用户ID、所属文章ID、自定义标识这类数据都可以
• 后端（比如你的editorImageUpload.php）可以通过常规的POST参数方式获取这些额外数据

修改后的完整代码示例： #

images_upload_handler: function (blobInfo, success, failure) { 
  var xhr, formData; 
  xhr = new XMLHttpRequest(); 
  xhr.withCredentials = false; 
  xhr.open('POST', 'queries/editorImageUpload.php'); 
  xhr.onload = function() { 
    var json; 
    if (xhr.status != 200) { 
      failure('HTTP Error: ' + xhr.status); 
      return; 
    } 
    console.log(xhr.response); 
    // 这里可以根据返回结果做自定义验证
    success(xhr.response); 
  }; 
  formData = new FormData(); 
  // 先添加图片文件
  formData.append('file', blobInfo.blob()); 
  // 👇 这里添加你需要的额外数据，举几个例子
  formData.append('user_id', '123'); 
  formData.append('article_id', '456'); 
  formData.append('upload_from', 'tinymce_editor'); 
  // 发送组装好的请求
  xhr.send(formData); 
}

后端PHP获取数据示例： #

在editorImageUpload.php里，你可以像获取普通POST参数一样拿到这些额外数据：

// 获取上传的图片文件
$uploadedFile = $_FILES['file'];
// 获取额外携带的数据
$userId = $_POST['user_id'];
$articleId = $_POST['article_id'];
$uploadSource = $_POST['upload_from'];

这样就轻松把额外数据和图片一起发送到后端啦，是不是很容易？

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