如何通过ajax post请求将照片从客户端发送到服务器？

Question

在我的网站上，客户可以上传照片进行处理（裁剪或选择照片色调的颜色），因此，我希望在选择各种参数时，立即显示上传照片的更改。 为此，我想使用ajax - 使用选定的参数将照片发送到服务器并返回处理后的照片。 但我遇到了一个问题——如何将这张照片传递给ajax post请求的参数？

在这样的标签的帮助下，用户上传照片 -

<input type="file" id="imageInput" accept="image/*">

。 之后我用js把这张照片放到img标签中

然后，当用户选择照片选项时，我向服务器发出 ajax post 请求 -

const image = document.getElementById('imageInput');

function ajaxSend(url, data) {
    fetch(`${url}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: JSON.stringify(data),
    })
        .then(response => response.json())
        // .then(json => render(json))
        .catch(error => console.error(error))
}

const colorTone = document.getElementById('ColorToneImg');

colorTone.addEventListener('change', function (e) {
    let selectedColor = e.target.value;
    let url = colorTone.getAttribute('data-action');
    let data = {
        'img': image.files[0],
        'color_tone': selectedColor
    }
    ajaxSend(url, data);
});

我正在 html 文档中寻找适当的标签（输入），并尝试从中获取照片并发送照片，但没有任何效果。我也尝试以某种方式从 img 标签获取照片，但没有任何效果。

这就是数据到达服务器的结果 -

<QueryDict: {'{"img":{},"color_tone":"green"}': ['']}>

我希望照片也能到达服务器，但我不知道如何实现。 任何帮助，将不胜感激。谢谢！

Answer 1

创建一个

FormData

实例并向其附加您的图像和色调。将

FormData

对象传递给

fetch

函数即可。标题将自动设置为

multipart/form-data

。

const image = document.getElementById('imageInput');
const colorTone = document.getElementById('ColorToneImg');

function ajaxSend(url, data) {
  fetch(url, {
    method: 'POST',
    body: data,
  })
  .then(response => response.json())
  .catch(error => console.error(error))
}

colorTone.addEventListener('change', function(e) {
  let selectedColor = e.target.value;
  let url = e.target.getAttribute('data-action');

  const data = new FormData();
  data.append('image', image.files[0]);
  data.append('color_tone', selectedColor);

  ajaxSend(url, data);
});