jQuery Ajax将空FormData发送到后端Codeigniter

Question

我正在尝试使用Jquery Ajax上传blob文件，但是后端收到了$ _POST和$ _FILES空数组，我正在使用Codeigniter作为后端框架。以下是我的代码： 这是我的config.php文件

$config['csrf_protection'] = TRUE;
$config['csrf_token_name'] = 'csrf_beta_token';
$config['csrf_cookie_name'] = 'csrf_beta_ck';
$config['csrf_expire'] = 7200;
$config['csrf_regenerate'] = FALSE;
$config['csrf_exclude_uris'] = array();

我的控制器功能：

public function add_thumbnail(){
    print_r($_POST);
    print_r($this->input->post());
    print_r($_FILES);
}

在我看来，我是我们裁剪器，用于裁剪图像并上传到服务器：

canvas.toBlob(function (blob) {

     var token_name = '<?php echo $this->security->get_csrf_token_name() ?>';
     var token_hash = '<?php echo $this->security->get_csrf_hash() ?>';
     var token_cookie = '<?php echo $this->config->item('csrf_cookie_name'); ?>';

     var formData = new FormData();

     formData.append('avatar', blob, 'avatar.jpg');
     formData.append(token_name, token_hash);
     //also tried to send token_cookie but not worked
     // formData.append(token_name, token_cookie);

    console.log(formData.get('avatar'));
    console.log(formData.get('token_name'));
    console.log(token_name, token_hash);

    $.ajax({
        url: "<?php echo base_url('backend/gallery/add_thumbnail'); ?>", 
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function (resp) {
          console.log(resp);
        },
        error: function (err) {
           console.log(err);
         }
      });
    });

我在不同的情况下测试了此代码

方案1：csrf_protection为 ON 时 我在控制台上收到此错误，“不允许您执行所请求的操作”

方案2：当我禁用时，csrf_projection在控制台上显示为空数组。

在以上两种情况下，我都可以使用formData.get（'avatar'）从formData中获取blob值。我认为文件是使用ajax追加但未发送到服务器的。非常感谢您的帮助。 谢谢：）