前端连接后端传post文件怎么

前端连接后端传送文件可以使用`FormData`对象和`XMLHttpRequest`对象。

1. 创建一个`FormData`对象，将需要上传的文件添加到对象中。例如：

const formData = new FormData();
formData.append('file', file); // file为需要上传的文件

2. 创建一个`XMLHttpRequest`对象，并使用`open`方法打开连接。例如：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true); // '/upload' 为后端接收文件的 API 地址

3. 设置`XMLHttpRequest`对象的`onload`和`onerror`事件，用于处理上传成功和上传失败的情况。例如：

xhr.onload = function() {
  console.log('上传成功！');
};

xhr.onerror = function() {
  console.log('上传失败！');
};

4. 将`FormData`对象作为`send`方法的参数，向后端发送文件。例如：

xhr.send(formData);

完整的代码示例：

const fileInput = document.querySelector('input[type="file"]');
const uploadButton = document.querySelector('button[type="submit"]');

uploadButton.addEventListener('click', function() {
  const file = fileInput.files[0];
  const formData = new FormData();
  formData.append('file', file);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onload = function() {
    console.log('上传成功！');
  };
  xhr.onerror = function() {
    console.log('上传失败！');
  };
  xhr.send(formData);
});

需要注意的是，后端需要支持接收文件，并且需要在响应头中设置`Access-Control-Allow-Origin`，允许前端发送跨域请求。