如何使用FormData和Fetch上传用户图片，读取value属性报错如何解决

错误根源 #

报错由两个问题共同导致：

• 如果将createPost函数绑定在了提交按钮的click事件而非<form>标签的submit事件上，e.target指向的是按钮元素而非表单，自然不存在neededimage、wantedimage属性，读取undefined的value就会抛出对应错误
• 即使事件绑定正确，type="file"的输入框选中的文件也不存在于value属性中，该属性仅返回虚假的本地路径字符串，实际文件存储在files类数组属性中，单个文件取files[0]即可

修复步骤 #

1. 调整事件绑定：将createPost绑定到外层form的submit事件上，示例如下

<form onsubmit="createPost(event)">
  <div>
    <input type="file"  accept="image/*" name="neededimage" id="file" />
    <input type="file"  accept="image/*" name="wantedimage" id="file2"/>
  </div>
  <button type="submit">提交</button>
</form>

2. 修正JS中取文件的代码：

const createPost = async (e) => {
  e.preventDefault();
  let formData = new FormData()
  formData.append("author", userid)
  // 替换原来的value读取逻辑，取files[0]拿到文件对象
  formData.append("needed_image", e.target.neededimage.files[0])
  formData.append("wanted_image", e.target.wantedimage.files[0])
  const response = await fetch('http://127.0.0.1:8000/api/createpost/', {
    method: "POST",
    body: formData
    // 注意：不要手动加Content-Type请求头，浏览器会自动生成带分隔符的正确值
  })
}

3. 可选健壮性优化，避免用户未选文件时报错：

const createPost = async (e) => {
  e.preventDefault();
  const neededImg = e.target.neededimage.files[0]
  const wantedImg = e.target.wantedimage.files[0]
  if (!neededImg || !wantedImg) {
    alert('请选择两张需要上传的图片后再提交')
    return
  }
  let formData = new FormData()
  formData.append("author", userid)
  formData.append("needed_image", neededImg)
  formData.append("wanted_image", wantedImg)
  const response = await fetch('http://127.0.0.1:8000/api/createpost/', {
    method: "POST",
    body: formData
  })
}

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