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自动为您反序列化响应。

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

1 个答案: