如何使用jQuery Cropper发送含裁剪图片的表单数据？

嘿，我瞅见你在用jQuery Cropper处理裁剪图上传的时候，代码里有点小问题，咱们来把它捋顺咯！

原代码的核心问题 #

你现在把FormData对象嵌套进了普通的JS对象data里，这会导致AJAX没法正确解析这个结构——浏览器处理文件上传的时候，要求所有数据都要放在同一个FormData实例中，不能嵌套存放。另外你代码里的contentType: fal...也没写完整，得改成false才行。

修正后的完整代码 #

display_img.cropper('getCroppedCanvas').toBlob(function (blob) {
  // 初始化FormData实例，所有数据都要存这里
  var formData = new FormData();
  
  // 添加裁剪后的图片Blob，第三个参数可以指定文件名，方便后端识别
  formData.append('croppedImage', blob, 'cropped-image.jpg');
  
  // 把其他表单字段逐一添加到FormData里
  formData.append('name', name);
  formData.append('description', description);
  formData.append('nsfw', nsfw);
  formData.append('cover', cover);
  
  // 如果你要上传多个文件（比如pictures、videos、mods是文件数组），要循环添加
  // 举个例子，处理pictures数组：
  // pictures.forEach(function(file) {
  //   formData.append('pictures[]', file);
  // });
  
  // 发起AJAX请求
  $.ajax({
    type: 'POST',
    url: '/kategorija',
    data: formData, // 直接传入FormData，不用嵌套
    processData: false, // 禁止jQuery自动处理FormData（避免转成查询字符串）
    contentType: false, // 让浏览器自动设置正确的multipart/form-data请求头
    success: function(response) {
      console.log('上传成功！', response);
      // 这里写上传成功后的逻辑，比如跳转页面、提示用户等
    },
    error: function(xhr, status, error) {
      console.error('上传失败：', error);
      // 处理错误情况，比如提示用户上传出错
    }
  });
});

关键知识点说明 #

• 所有数据放同一个FormData：文件上传必须用multipart/form-data格式，而FormData是浏览器提供的专门处理这种格式的对象，所有表单字段和文件都要直接append进去，不能嵌套。
• processData: false：默认情况下jQuery会把请求数据转成查询字符串，但FormData不需要这个处理，所以要关掉。
• contentType: false：手动设置contentType: 'multipart/form-data'容易出错，因为浏览器需要自动添加边界符（boundary），设为false会让浏览器自动处理这部分，更可靠。
• 多文件上传：如果是数组形式的文件（比如多个图片），要用字段名[]的格式append，这样后端框架能正确识别为数组。

内容的提问来源于stack exchange，提问作者mile-panic