Formdata文件上传

百事芬达_前端
1,616 阅读1分钟

Formdata文件上传

注意后台并不会将所有业务的参数处理使用formdata的方式来进行，只有在有文件数据的时候，才会处理formdata数据，意味着，之前所使用的普通接口不要传递formdata数据.

CSS代码

<style>
      .thumb-box {
        text-align: center;
        margin-top: 50px;
      }

      .thumb {
        width: 250px;
        height: 250px;
        object-fit: cover;
        border-radius: 50%;
      }
    </style>
  </head>

  <body>
    <div class="thumb-box">
      <!-- 头像 -->
      <img src="./images/cover.jpg" class="img-thumbnail thumb" alt="" />
      <div class="mt-2">
        <!-- 文件选择框 -->
        <!-- accept 属性表示可选择的文件类型 -->
        <!-- image/* 表示只允许选择图片类型的文件 -->
        <form action="">
          <!-- 真正的页面中，可能不止只有文件域，还有其它的表单元素 -->
          <input type="text" name="username" />
          <input type="text" name="password" />
          <input name="avatar" type="file" id="iptFile" accept="image/*" />
        </form>
      </div>
    </div>
    <script src="./lib/axios.js"></script>

利用formdata上传所表单包含内容（inpu和头像文件）

let iptFile = document.querySelector('#iptFile')
      // 用户选择文件之后所触发的事件：change
      iptFile.addEventListener('change', function() {
        // 收集文件
        let form = document.querySelector('form')
        let fd = new FormData(form)
        // 发起axios请求
        axios
          .post('http://www.itcbc.com:3006/api/formdata', fd)
          .then(result => {
            console.log(result)
          })
      })

利用formdata只上传文件数据，input里内容不会上传

 let iptFile = document.querySelector('#iptFile')
      // 用户选择文件之后所触发的事件：change
      iptFile.addEventListener('change', function() {
        // 收集文件
        // files:当前用户所有文件的文件列表(伪数组)，里面的每一个值都是文件对象
        let myfile = iptFile.files[0]
        console.log(myfile)

        let fd = new FormData()
        // appent追加参数到formdata,值可以是任意类型
        fd.append('avatar', myfile)
        // 发起axios请求
        axios
          .post('http://www.itcbc.com:3006/api/formdata', fd)
          .then(result => {
            console.log(result)
          })
      })

利用formdata实现本地图片预览

    let iptFile = document.querySelector('#iptFile')
    let thumb = document.querySelector('.thumb')
    // 用户选择文件之后所触发的事件：change
    iptFile.addEventListener('change', function () {
      // 收集文件
      // files:当前用户所有文件的文件列表(伪数组)，里面的每一个值都是文件对象
      let myfile = iptFile.files[0]
      // createObjectURL:可以将你传入的文件对象数据存储到内存，并返回内存中的存储地址(路径)
      // let url = URL.createObjectURL(文件对象)
      let myurl = URL.createObjectURL(myfile)
      thumb.src = myurl
      // return
      // 实现文件的本地预览---现在图片还没有上传给服务器
      let fd = new FormData()
      // appent追加参数到formdata,值可以是任意类型
      fd.append('avatar', myfile)
      // 发起axios请求
      axios
        .post('http://www.itcbc.com:3006/api/formdata', fd)
        .then(result => {
          console.log(result)
        })
    })
avatar
文章
阅读
粉丝