标签：文件 const FormData fd btn 上传 append

FormData

概念

概念：FormData 是浏览器提供的一个 WebAPI，它以键值对的方式存储数据。

作用：FormData 配合 Ajax 技术，能够向服务器发送 multipart/form-data 格式的请求体数据。

典型应用场景：FormData + Ajax 技术实现文件上传的功能。

注意：Ajax 实现文件上传的时候，请求体的编码格式必须是 multipart/form-data。

FormData 的基本用法

FormData 是一个构造函数，new FormData() 即可得到 FormData 对象：

const fd = new FormData() // 创建一个空白的 FormData 对象，里面没有包含任何数据。

调用 FormData 对象的 append(键, 值) 方法，可以向空白的 FormData 中追加键值对数据，其中：

• 键表示数据项的名字，必须是字符串

• 值表示数据项的值，可以是任意类型的数据

fd.append('username', '张三') // 键是 username，值是字符串类型

fd.append('age', 20) // 键是 age， 值是数字类型

fd.append('avatar', 图片文件) // 键是 avatar， 值是文件类型

结合 FormData 实现头像上传

主要的实现步骤：

1. 使用文件选择器选择图片文件
2. 把用户选择的文件存入 FormData 对象
3. 使用 axios 把 FormData 发送给服务器
4. 模拟文件选择器的点击事件

<input type="file" class="hidefile">
<input type="button" value="上传按钮" class="btn">
<br>
<img src="" alt="">
<script src="./lib/axios.js"></script>

axios.defaults.baseURL = 'http://www.liulongbin.top:3006'

const btn = document.querySelector('.hidefile')
const btn_s = document.querySelector('.btn')
const img = document.querySelector('img')

// 隐藏btn，因为不美观，在btn_s点击事件回调函数中调用btn点击事件
btn_s.onclick = function () {
  // 通过按钮，自己调用点击事件
  btn.click()
}

// 按钮注册change事件
btn.addEventListener('change', function () {

  // 获取文件
  let file = this.files[0]

  // 实例化对象
  // 文件添加到formdata容器中
  let fd = new FormData()
  fd.append('myfile',file)

  // 获取文件后缀名
  // 获取文件名
  const fileName = file.name
  // 获取最后一个.的位置索引
  const index = fileName.lastIndexOf('.')
  // 截取字符串
  const last = fileName.substring(index)
  
  if(last === '.png' || last === '.jpg' || last === '.webp'){
    // 文件格式正确
    // 发送post请求
    axios.post('/api/upload/avatar',fd).then(function(res){
      // console.log(res)
      // 上传图片在网页中预览
      img.src = 'http://www.liulongbin.top:3006'+res.data.url
    })
  }else {
    alert('请选择图片格式')
  }

})

标签：文件,const,FormData,fd,btn,上传,append
来源： https://www.cnblogs.com/yyshow/p/16355015.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。