无法通过附加参数的AJAX上传图像因为processData:false

Question

我正在尝试使用以下代码使用ajax上传图像:

function saveToServer(file) {

    const fd = new FormData();
    fd.append('image', file);

    $.ajax({
        method: 'post',
        data: {
            image: fd,
            diaryHash: "{{ $diary->hash }}",
            entryHash: "{{ $entry->hash }}",
        },
        processData: false,
        contentType: false,
        url: "{{ action('EntriesController@storeImage') }}",
        success: function(data, textStatus, jqXHR){
            const url = JSON.parse(xhr.responseText).data;
            insertToEditor(url);
        }
    });
}

我正在传递要存储的图像,我正在传递另外两个变量,diaryHash并且entryHash.

我没有在控制器中获取传递的变量,因为processData设置为false.

使用AJAX进行图像上传时,如何将数据与图像一起传递？

Answer 1

问题是因为您将FormData对象放在要序列化的对象中.您需要反转该逻辑并将其他参数放在 FormData中,如下所示:

function saveToServer(file) {   
  const fd = new FormData();
  fd.append('image', file);
  fd.append('diaryHash', '{{ $diary->hash }}');
  fd.append('entryHash', '{{ $entry->hash }}');

  $.ajax({
    method: 'post',
    data: fd,
    processData: false,
    contentType: false,
    dataType: 'json',
    url: "{{ action('EntriesController@storeImage') }}",
    success: function(data, textStatus, jqXHR){
      const url = data.data;
      insertToEditor(url);
    }
  });
}

另请注意,我将该dataType属性添加到请求中,以便jQuery将自动反序列化响应.