原生ajax结合formData上传图片

html部分：

<form>
    <input type="file" id="file">
</form>
<div class="img_box">
    <img src="" alt="">
</div>

js部分：

// 上传图片
  var file = document.querySelector('#file')
// 触发input框的change事件
  file.onchange = function() {
    var xhr = new XMLHttpRequest()
    // 创建了一个空的formData
    var formData = new FormData()
    // 文件
    formData.append('pic1', file.files[0])
    // post请求 接口：'/category/addSecondCategoryPic'
    xhr.open('post', '/category/addSecondCategoryPic')
    xhr.send(formData)
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var result = JSON.parse(xhr.responseText)
        // 让图片显示到对应的img标签中去
        document.querySelector('.img_box img').src = result.picAddr
      }
    }
  }