AJAX 02-个人信息设置

 图片上传

1. 获取图片文件对象

2. 使用 FormData 携带图片文件

const fd = new FormData()
fd.append(参数名, 值)

3. 提交表单数据到服务器，使用图片 url 网址

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

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // change 改变事件
    document.querySelector('.upload').addEventListener('change', e => {
      // 1. 获取图片文件
      console.log(e.target.files[0])
      // 2. 使用 FormData 携带图片文件
      const fd = new FormData()
      fd.append('img', e.target.files[0])
      // 3. 提交到服务器，获取图片url网址使用
      axios({
        url: 'http://hmajax.itheima.net/api/uploadimg',
        method: 'POST',
        data: fd
      }).then(result => {
        console.log(result)
        // 取出图片url网址，用img标签加载显示
        const imgUrl = result.data.data.url
        document.querySelector('.my-img').src = imgUrl
      })
    })
  </script>

1. 信息渲染

// 1. 信息渲染
// 获取用户的数据，回显数据到标签上
// 给自己取个外号并告诉服务器，获取对应的用户信息
const creator = '波仔'
axios({
  url: 'http://hmajax.itheima.net/api/settings',
  params: {
    creator
  }
}).then(result => {
  // console.log(result)
  // console.log(result.data.data)
  const userObj = result.data.data
  // 回显数据到标签上
  Object.keys(userObj).forEach(item => {
    if (item === 'avatar') {
      // 赋予默认头像
      document.querySelector('.prew').src = userObj[item]
    } else if (item === 'gender') {
      // 赋予默认性别
      // 获取性别单选框   NodeList(2) [input.gender, input.gender]
      const radioList = document.querySelectorAll('.gender')
      // 获取性别数字
      const num = userObj[item]
      // 性别数字作为下标，找到对应性别单选框，设置选中状态
      radioList[num].checked = true
    } else {
      // 赋予默认内容
      document.querySelector(`.${item}`).value = userObj[item]
    }
  })
})

2. 图像修改

// for属性的值与id属性的值相对应，用于提高可访问性
// 当用户点击label标签时，与之相关联的输入元素会获得焦点
<label for="upload">更换头像</label>
<input id="upload" type="file" class="upload">

// 2. 修改头像
// 获取头像文件，提交服务器并更新头像
document.querySelector('.upload').addEventListener('change', e => {
  // 获取头像文件
  // console.log(e.target.files[0])
  const fd = new FormData()
  fd.append('avatar', e.target.files[0])
  fd.append('creator', creator)
  // 提交服务器并更新头像
  axios({
    url: 'http://hmajax.itheima.net/api/avatar',
    method: 'PUT',
    data: fd
  }).then(result => {
    const imgUrl = result.data.data.avatar
    document.querySelector('.prew').src = imgUrl
  })
})

3. 提交表单

// 3. 提交表单
// 收集表单信息，提交到服务器保存
document.querySelector('.submit').addEventListener('click', () => {
  // 收集表单信息
  const userForm = document.querySelector('.user-form')
  const userObj = serialize(userForm, { hash: true, empty: true })
  userObj.creator = creator
  // 性别字符型数字，转成数字类型
  userObj.gender = +userObj.gender
  // 提交到服务器保存
  axios({
    url: 'http://hmajax.itheima.net/api/settings',
    method: 'PUT',
    data: userObj
  })
})

4. 提示框

<div class="toast my-toast" data-bs-delay="1500">
    // 提示框内容
</div>

// 创建提示框对象
const toastDom = document.querySelector('CSS选择器')
const toast = new bootstrap.Toast(toastDom)

// 显示提示框
toast.show()

// 3. 提交表单
// 收集表单信息，提交到服务器保存
document.querySelector('.submit').addEventListener('click', () => {
  // 收集表单信息
  const userForm = document.querySelector('.user-form')
  const userObj = serialize(userForm, { hash: true, empty: true })
  userObj.creator = creator
  // 性别字符型数字，转成数字类型
  userObj.gender = +userObj.gender
  // 提交到服务器保存
  axios({
    url: 'http://hmajax.itheima.net/api/settings',
    method: 'PUT',
    data: userObj
  }).then(result => {
    // 创建提示框对象
    const toastDom = document.querySelector('.my-toast')
    const toast = new bootstrap.Toast(toastDom)
    // 显示提示框
    toast.show()
  })
})