如何使用reqwest在JavaScript中实现input变更触发的文件上传？

嘿，看你已经用reqwest搞定不少AJAX上传场景了，现在要实现选完文件就自动上传是吧？我来帮你把代码补全，顺便修正几个容易踩的小坑～

首先，先把你的代码补全并调整关键细节，完整实现如下：

document.getElementById('upload-file').addEventListener("change", function(e){
  // 先判断是否选中了文件，避免用户取消选择的情况
  const file = e.currentTarget.files[0];
  if (!file) return;

  const formData = new FormData();
  // 把文件添加到FormData，第三个参数可选，用来指定文件名（默认用file.name）
  formData.append('upload', file, file.name);

  reqwest({
    url: '/cgi-bin/upload.cgi',
    type: 'json', // 表示期望后端返回JSON格式的响应，根据实际情况调整
    method: 'post',
    data: formData,
    // 这里不需要手动设置enctype！reqwest会自动处理multipart/form-data的Content-Type
    success: function(response) {
      console.log('上传成功！', response);
      // 这里可以添加上传成功后的操作，比如提示用户、清空输入框等
      e.currentTarget.value = ''; // 重置文件输入框，方便再次选择同一文件
    },
    error: function(err) {
      console.error('上传失败：', err);
      // 处理上传失败的情况，比如提示用户重试
    }
  });
});

几个关键调整说明： #

• 不要手动设置enctype请求头：当你传入FormData作为data时，reqwest会自动生成正确的multipart/form-data请求头，并且包含必要的boundary分隔符。手动设置headers: {'enctype': 'multipart/form-data'}会覆盖掉这个自动生成的头，缺少boundary会导致后端无法正确解析文件。
• 增加文件存在判断：用户可能点击文件选择框后又取消选择，这时files[0]会是undefined，加个判断能避免无意义的请求。
• 重置文件输入框：上传成功后重置输入框的值，这样用户再次选择同一文件时，change事件依然会触发（因为输入框值从空变为文件路径，即使是同一个文件）。

额外小提示： #

• 如果需要上传多个文件，可以把文件输入框设置为multiple，然后遍历e.currentTarget.files数组，逐个append到FormData里：

  Array.from(e.currentTarget.files).forEach(file => {
    formData.append('uploads[]', file);
  });
  

• 可以在上传过程中添加加载状态提示，比如显示一个loading图标，提升用户体验。

内容的提问来源于stack exchange，提问作者Andrew Newby