node+mongodb搭建博客，更换用户头像信息页面的问题

Question

我用input表单点击跟换头像时，选择了本地的图片，但是那个img没有更换，然后用表单提交时，表单这边也没有img的数据
这是整个表单的页面
我思考了一下，应该是图片提交时做一次处理，然后当所有信息提交之后再做一次处理

 <form action="http://localhost:5000/settings/profile" id="basic_form" method="post"  enctype="multipart/form-data">
      <div class="form-group">
        <label for="exampleInputEmail1">账号</label>
        <p class="form-control-static">[e-mail]</p>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">昵称</label>
        <input name="nickname" type="password" class="form-control" id="exampleInputPassword1" placeholder="">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">介绍</label>
        <textarea name="bio" class="form-control" rows="3"></textarea>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">性别</label>
        <div>
          <label class="radio-inline">
            <input name="gender" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 男
          </label>
          <label class="radio-inline">
            <input name="gender" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 女
          </label>
          <label class="radio-inline">
            <input name="gender" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 保密
          </label>
        </div>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">生日</label>
        <input name="birthday" type="password" class="form-control" id="exampleInputPassword2" placeholder="">
      </div>
      <button type="submit" class="btn btn-success">保存</button>
    </form>
  </div>
  <div class="col-md-2 profile-avatar">
    <dl>
      <dt>头像设置</dt>
      <dd>
        <img class="avatar" name="avatar" width="150" height="150" src="../public/img/avatar-max-img.png" alt="">
        <div>
          <input class="" type="file" value="Submit">
        </div>
      </dd>
    </dl>

下面是我的ajax的处理

<script>
  $('#basic_form').on('submit', function (e) {
      e.preventDefault()
      var formData = $(this).serialize()
      console.log(formData)
      $.ajax({
        url: '/settings/profile',
        type: 'post',
        data: formData,
        dataType: 'json',
        success: function (data) {
          var err_code = data.err_code
          if (err_code === 0) {
            // window.alert('注册成功！')
            // 服务端重定向针对异步请求无效
            window.location.href = '/'
          } else if (err_code === 1) {
            window.alert('邮箱或者密码错误')
          } else if (err_code === 500) {
            window.alert('服务器忙，请稍后重试！')
          }
        }
      })
    })
</script>

下面是我接收到做的处理：

router.post('/settings/profile',function (req, res, next) {
  var body = req.body
  var file = req.file
  console.log(body)
  console.log(file)
  var form = new formidable.IncomingForm()
  //设置图片上传的存放地址
  // form.uploadDir = "./uploads"
   form.parse(req, function (err, fields, files) {
    console.log('111111111')
    console.log(files)
  //   //生成随机数
  //   var ran = parseInt(Math.random()*8999+10000)
  //   //拿到扩展名
  //   var extname = path.extname(files.avatar)

  })
})

我发现在这里，file或者fields都拿不到数据，只有body才能拿到数据，但是不包括图片的信息，是不是我需要给img提交时做一次表单处理，然后通过ajax提交，然后渲染一次页面，再进行处理其他的，但是如果用户在提交头像和修改信息都进行了，那更换头像时，那些已经填上的信息改怎么处理？
下面是页面结构

Answer 1

1.选择本地图片之后，使用FileReader将图片文件转换成Base64格式
2.将转换的Base64赋值给img的src属性,页面上的图片就显示更换掉了

如果要存数据库，那就要看你后台是接收什么样数据类型了
1.接收base64, 把你的base64字符串发到后台，后台解析成图片，保存到本地，使用服务器生成网络路径，再把得到的网络路径存至数据库。

Answer 2

input的img没有更换，表单那边自然也不会有数据。
你应该贴出你的代码，还有网络请求截图