使用普通Javascript上传文件（表单数据对象始终为空）

我已经尝试上传一个图像到服务器上好几天了。但服务器不接收任何图像，因为表单数据对象始终为空。然后，我尝试使用一个名为dropzone的库来上传图像，结果成功了。但是我不想使用任何图书馆。有人能帮我理解为什么表单数据对象在发送时总是空的吗？我真的很感激，因为这对我将来也有帮助。多谢各位

Html代码

<form class="editProfileForm" encType="multipart/form-data">
  <div class="form-group">
    <div class="row">
      <div class="col-12 mt-3">
        <div class="text-left">
          <label for="certificateImg">CertificateImage</label> 
        </div>
        <input id="certificateImg" type="file" />
      </div>
     </div>

    <div class="row">
       <div class="col-sm-12 text-center mt-3 mb-5">
          <button class="saveBtn btn btn-primary btn-brand-lg" type="button">Save</button>
       </div>
    </div>
  </div>
</form>               

---

将表单元素标记中的

encType

属性更改为

encType

，您认为

formData

为空？因为

console.log（formData）

？->

formData.forEach（entry=>console.log（entry））

No，不是因为这个。我忘了删除控制台日志。我知道formdata不能直接登录到控制台，您需要为此输入项。但来自服务器的响应说它没有收到任何映像。然后在客户端上开始调试。记录

formData

的内容，如图所示，在开发者工具的网络选项卡中检查请求，在服务器上检查请求，…入口控制台显示我上传了一个文件以及名称、大小等详细信息。但网络中的响应是“请上传一个文件”，这意味着没有上传任何文件。我很感激你的帮助，但我还是不知道出了什么问题。因为当我在postman中测试api时。工作正常。检查控制台是否有错误（主要是CORS）。和“网络”选项卡（请求是否正常？）。检查服务器上的请求。它包含图像吗？任何服务器拒绝请求的规则？“HTML语法中的许多字符串（例如元素名称及其属性）不区分大小写，但仅适用于ASCII大写字母和ASCII小写字母。”（来源：）

const editProfileForm = document.querySelector('.editProfileForm');
const saveBtn = document.querySelector('.saveBtn');
saveBtn.addEventListener('click', () => {
  let img = document.getElementById('certificateImg').files[0];
  let formData = new FormData();
  formData.append('img', img);

  console.log(formData);

  const doctorUpdateGeneral = async () => {
    try {
      const response = await axios.put(
        'API here',
        {
          certificate: formData,
        },
        {
          headers: {
            Authorization: token,
          },
        }
      );
      console.log(response);
      window.location.reload();
      console.log(pmdc);
    } catch (err) {
      console.log(err);
    }
   };
   doctorUpdateGeneral();
  });