formdata上传文件（只单独上传文件即可）

 <form class="card-body bg-light" id="addForm">
    <!-- 书名 -->
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">书名</span>
      </div>
      <input type="text" class="form-control" placeholder="请输入图书名称" name="bookname" />
    </div>
    <!-- 作者 -->
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">作者</span>
      </div>
      <input type="text" class="form-control" placeholder="请输入作者名字" name="author" />
    </div>
    <!-- 出版社 -->
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">出版社</span>
      </div>
      <input type="text" class="form-control" placeholder="请输入出版社名称" name="publisher" />
    </div>
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="customFile" />
      <label class="custom-file-label" for="customFile">请选择文件</label>
    </div>
  </form>
  <script src="./lib/axios.js"></script>
  <script>
    //获取文件按钮元素
    let customFile = document.querySelector('#customFile')

    //给添加按钮绑定文件触发事件
    customFile.addEventListener('change', function () {
      // console.log(customFile.files);
      //获取单个文件元素
      let myfile = customFile.files[0]
      //收集文件 
      let fd = new FormData()
      //把获取到的单个文件元素追加到formdata  avatar要参照接口文档来写
      fd.append('avatar', myfile)

      //发起axios请求  要注意文件接口地址是api/formdata
      axios.post('http://www.itcbc.com:3006/api/formdata', fd)
        .then((result) => {
          console.log(result);
        })
    })
  </script>