前端如何发送上传文件的post请求

前端发送上传文件的POST请求通常使用HTML的`<input type="file">`元素让用户选择文件，然后通过JavaScript的File API处理文件并构造FormData对象。以下是使用fetch、axios或jQuery等库发送POST请求的一个例子：

**使用Fetch:**

let fileInput = document.querySelector('input[type=file]'); // 获取文件输入元素

// 用户选择文件后
fileInput.addEventListener('change', function(e) {
  let files = e.target.files;
  if (files.length > 0) {
    let formData = new FormData();
    formData.append('file', files[0]); // 将文件添加到FormData

    fetch('your-api-url', {
      method: 'POST',
      body: formData,
      headers: {'Content-Type': 'multipart/form-data'}
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
  }
});

**使用axios:**

const fileInput = document.querySelector('input[type=file]');
fileInput.addEventListener('change', async function() {
  const selectedFile = this.files[0];
  try {
    const formData = new FormData();
    formData.append('file', selectedFile);

    const response = await axios.post('your-api-url', formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
    });
    console.log(response.data);
  } catch (error) {
    console.error('Error uploading file:', error);
  }
});

**使用jQuery:**

$(document).on('change', 'input[type=file]', function() {
  const file = $(this)[0].files[0];

  $.ajax({
    url: 'your-api-url',
    type: 'POST',
    data: new FormData(),
    contentType: false,
    processData: false,
    xhr: function() {
      var xhr = new window.XMLHttpRequest();
      xhr.upload.addEventListener("progress", function(e) {
        if (e.lengthComputable) {
          var percentComplete = Math.round((e.loaded / e.total) * 100);
          console.log(percentComplete + "% uploaded");
        }
      }, false);
      return xhr;
    },
    data: new FormData().append('file', file),
    success: function(data) {
      console.log(data);
    },
    error: function(xhr, status, error) {
      console.error('Error:', error);
    }
  });
});