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()