使用 Vanilla Javascript 上传文件（表单数据对象始终为空）答案

【问题标题】：File Upload With Vanilla Javascript (Form Data Object always empty)使用 Vanilla Javascript 上传文件（表单数据对象始终为空）
【发布时间】：2021-02-26 03:47:24
【问题描述】：

我这几天一直在尝试将图像上传到服务器。但是服务器没有收到任何图像，因为表单数据对象始终为空。然后我尝试使用一个名为 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>

JS 代码


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();
  });

【问题讨论】：

为什么你认为formData 是空的？因为console.log(formData)？ -> formData.forEach(entry => console.log(entry))
不，不是因为这个。我忘了删除那个控制台日志。我知道 formdata 不能直接在控制台记录，您需要为此输入。但是服务器的回复说它没有收到任何图像。
然后在客户端开始调试。记录formData的内容如图，在开发者工具的network选项卡中查看请求，查看服务器上的请求，...
入口控制台显示我上传了一个文件以及名称，大小等详细信息。但是网络中的响应是“请上传文件”，这意味着没有上传文件。感谢您的帮助，但我仍然无法弄清楚出了什么问题。因为当我在邮递员中测试那个 api 时。它工作正常。
检查控制台是否有错误（主要是 CORS）。和网络选项卡（请求可以吗？）。检查服务器上的请求。它包含图像吗？服务器拒绝请求的任何规则？

标签： javascript forms file-upload form-data

【解决方案1】：

将表单元素标签中的encType属性更改为enctype

【讨论】：

"HTML 语法中的许多字符串（例如元素名称及其属性）不区分大小写，但仅适用于 ASCII 大写字母和 ASCII 小写字母。”（来源：html.spec.whatwg.org/multipage/syntax.html）