使用formData追加一个图片文件，发送请求后，payload中发现乱码是什么原因

如果在使用 FormData 对象追加图片文件后，发送请求时发现 payload 中出现乱码，可能是因为没有正确设置请求头中的 Content-Type。应该将 Content-Type 设置为 multipart/form-data，这样服务器才能正确地解析请求，获取到文件数据。

以下是一个追加图片文件并发送请求的示例代码：

// 创建一个 FormData 对象
var formData = new FormData();

// 创建一个 <input type="file"> 元素
var fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.name = 'image';

// 监听文件选择事件
fileInput.addEventListener('change', function(event) {
  // 获取选择的文件
  var file = event.target.files[0];
  
  // 将文件添加到 FormData 对象中
  formData.append('image', file);
});

// 添加 <input type="file"> 元素到表单中
document.querySelector('form').appendChild(fileInput);

// 创建一个 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 设置请求方法和 URL
xhr.open('POST', '/upload');

// 设置请求头中的 Content-Type
xhr.setRequestHeader('Content-Type', 'multipart/form-data');

// 发送 FormData 对象
xhr.send(formData);

// 监听请求状态的变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，处理返回的数据
    console.log(xhr.responseText);
  }
};

在上面的代码中，我们首先创建了一个 FormData 对象，并创建了一个 <input type="file"> 元素，监听了文件选择事件，并将选择的文件添加到 FormData 对象中。然后，我们创建了一个 XMLHttpRequest 对象，并设置了请求方法和 URL。接着，我们通过 setRequestHeader() 方法设置了请求头中的 Content-Type 为 multipart/form-data。最后，我们使用 send() 方法将 FormData 对象发送出去，并监听了 XMLHttpRequest 对象的 onreadystatechange 事件，在请求状态变化时进行处理。