AJAX案例——图片上传个人信息操作

黑马程序员视频地址：

AJAX-Day02-11.图片上传https://www.bilibili.com/video/BV1MN411y7pw?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=26

图片上传

  <!-- 文件选择元素 --><input type="file" class="upload">

    //绑定改变事件document.querySelector(".upload").addEventListener("change", e => {//获取图片文件const imgFile = e.target.files[0]    //图片资源保存在files中//使用 FormData 携带图片文件    因为服务器要求以form-data（表单）的样式上传const imgForm = new FormData()imgForm.append("img", imgFile)    //服务器要求将图片资源放在表单中的img属性里提交//提交到服务器axios({url: "https://hmajax.itheima.net/api/uploadimg",method: "POST",data: imgForm}).then(result => {imgUrl = result.data.data.url    //返回的图片链接})})

案例：网站换肤

document.querySelector(".bg-ipt").addEventListener("change", e => {//将图片挂载到表单中的img属性上const imgDom = new FormData() //创建表单实例对象imgDom.append("img", e.target.files[0])//将图片数据传给表单的img属性//上传到服务器axios({url: "https://hmajax.itheima.net/api/uploadimg",method: "POST",data: imgDom}).then(result => {const bgUrl = result.data.data.url//设置为body背景图document.body.style.backgroundImage = `url(${bgUrl})`//保存图片链接到本地存储localStorage.setItem("bgUrl", bgUrl)})
})//从本地存储中读取上一次上传的背景图并加载到页面上
const bgUrl = localStorage.getItem("bgUrl")
bgUrl && (document.body.style.backgroundImage = `url(${bgUrl})`) //使用逻辑中断判断是否要执行加载背景图代码

个人信息设置

1.渲染数据

//获取用户数据
const creator = "USER_A001"
axios({url: "https://hmajax.itheima.net/api/settings",params: {creator}
}).then(result => {//渲染数据const dataObj = result.data.data  /** * dataObj数据详情{"avatar": "http://hmajax.itheima.net/avatar/avatar2.png","nickname": "itheima","email": "itheima@itcast.cn","desc": "我是USER_A001","gender": 0}* Object.keys(dataObj)数据详情，["avatar","nickname","email","desc","gender"]*/Object.keys(dataObj).forEach(key => {if(key === "avatar") //avatar的属性值设置不同，应单独处理{document.querySelector(".prew").src = dataObj[key]}else if(key === "gender")  //gender无法直接赋值，也应单独处理{const gender = document.querySelectorAll(".gender")    //获取两种选项的控件/** * gender数据：{"0": {男选项控件},"1": {女选项控件}}*/const numData = dataObj[key] //获取dataObj属性中的gender值（0 or 1）gender[numData].checked = true  //gender[numData]相应获取控件}else{document.querySelector(`.${key}`).value = dataObj[key]    //其他数据的渲染}})
})

2.修改头像

//上传图片
document.querySelector(".upload").addEventListener("change", e => { //改变事件
const newAvatar = e.target.files[0] //上传的图片数据
const avatarDom = new FormData()  //创建表单实例对象
avatarDom.append("avatar", newAvatar) //将图片数据添加到表单实例对象上
avatarDom.append("creator", creator)  //将用户代号添加到表单实例对象上
axios({url: "https://hmajax.itheima.net/api/avatar",method: "PUT",data: avatarDom
}).then(result => {//获取服务器返回的图片链接const newAvatarimg = result.data.data.avatar//将新的头像回显到页面中document.querySelector(".prew").src = newAvatarimg
})
})

3.修改信息

//修改个人信息
document.querySelector(".submit").addEventListener("click", () => {//收集表单数据const formObj = document.querySelector(".user-form")const newUserForm = serialize(formObj, {hash: true, empty: true})newUserForm.creator = creator //添加用户标识属性newUserForm.gender = +newUserForm.gender //将gender属性转化为数字//提交数据axios({url: "https://hmajax.itheima.net/api/settings",method: "PUT",data: newUserForm})
})

提示框

//HTML代码
<!-- toast 提示框 --><div class="toast my-toast" data-bs-delay="1500">    <!--data-bs-delay持续时间ms--><div class="toast-body"><div class="alert alert-success info-box">操作成功</div></div></div>//JS代码const myToastDom = document.querySelector(".my-toast")const myToast = new bootstrap.Toast(myToastDom)myToast.show()