文件上传
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 实现头像上传
主要的实现步骤:
- 使用文件选择器选择图片文件
- 把用户选择的文件存入 FormData 对象
- 使用 axios 把 FormData 发送给服务器
- 模拟文件选择器的点击事件
<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('请选择图片格式') } })
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性