案例分析：
如图所示，页面加载时有数据回填，同时实现select表单同步和图片上传，保存后上传至服务器等功能
HTML模板：
08.案例_个人信息修改 .form-select { width: 103px; display: inline-block; } .col-form-label { text-align: right; } .figure-img { width: 100px; height: 100px; cursor: pointer; } #upload { display: none; } 个人设置
--省-- --市-- --区-- 
修改头像 一.页面回填
通过获取内置个人信息进行页面回填
// 前缀基地址 axios.defaults.baseURL = 'http://ajax-api.itheima.net/' // 获取标签方法$ function $(id) { return document.querySelector('#' + id) } // 数据回填方法 async function getInfo() { const res = await axios.get('api/settings') const { nickname, province, city, area, avatar } = res.data.data // 昵称 $('nickname').value = nickname // 头像地址 $('avatar').src = avatar // 给头像框input进行赋值，方便后期拿取数据 $('avatarInp').value = avatar // 省数据 const provinceAll = await axios.get('api/province') $('province').innerHTML += provinceAll.data.data.map(item => `${item}`).join('') $('province').value = province // 市数据 const cityAll = await axios.get('api/city?pname=' + province) $('city').innerHTML += cityAll.data.data.map(item => `${item}`).join('') $('city').value = city // 区数据 const areaAll = await axios.get(`api/area?pname=${province}&cname=${city}`) $('area').innerHTML += areaAll.data.data.map(item => `${item}`).join('') $('area').value = area } // 调用回填方法 getInfo()
二.省市区下拉框的联动
// 省数据下拉框 $('province').addEventListener('change', async () => { // 获取省下市数据 const cityAll = await axios.get('api/city?pname=' + $('province').value) // 渲染市数据 $('city').innerHTML = cityAll.data.data.map(item => `${item}`).join('') // 获取市下区数据 const areaAll = await axios.get(`api/area?pname=${$('province').value}&cname=${$('city').value}`) // 渲染区数据 $('area').innerHTML = areaAll.data.data.map(item => `${item}`).join('') }) $('city').addEventListener('change', async () => { const areaAll = await axios.get(`api/area?pname=${$('province').value}&cname=${$('city').value}`) $('area').innerHTML = areaAll.data.data.map(item => `${item}`).join('') })
三.头像图片上传功能
// 图片上传功能 $('upload').addEventListener('change', (e) => { // 非空判断 if (e.target.files.length === 0) { return } // 创建FormData接收 const fd = new FormData() // 将图片数据添加到fd中 fd.append('avatar', e.target.files[0]) // 图片上传接口 axios.post('api/file', fd).then(res => { console.log(res); $('avatar').src = res.data.data.url // 给头像框input进行赋值，方便拿取数据 $('avatarInp').value = res.data.data.url }) }) // 图片点击事件 $('avatar').addEventListener('click', () => { // 优化图片上传功能 $('upload').click() })
四.将数据上传至服务器保存
// 上传点击事件 $('uploadAll').addEventListener('click', async (e) => { // 取消默认刷新操作 e.preventDefault() // 用serialize获取表单中所有内容(前面给头像框input赋值的应用) const userFormall = serialize($('userForm'), { hash: true }) try { // 执行成功,上传数据并弹出ok弹框 await axios.put('api/settings', userFormall) alert('ok') } catch (error) { alert('error') } })
五.个人经验①省市区下拉框联动时，操作省数据联动市数据时，仍需对区数据进行联动②给图片input框的value赋值，方便最后上传服务器时用serialize获取数据③附完整源码
08.案例_个人信息修改 .form-select { width: 103px; display: inline-block; } .col-form-label { text-align: right; } .figure-img { width: 100px; height: 100px; cursor: pointer; } #upload { display: none; } 个人设置
--省-- --市-- --区-- 修改头像 // 前缀基地址 axios.defaults.baseURL = 'http://ajax-api.itheima.net/' // 获取标签方法$ function $(id) { return document.querySelector('#' + id) } // 数据回填方法 async function getInfo() { const res = await axios.get('api/settings') const { nickname, province, city, area, avatar } = res.data.data // 昵称 $('nickname').value = nickname // 头像地址 $('avatar').src = avatar // 给头像框input进行赋值，方便后期拿取数据 $('avatarInp').value = avatar // 省数据 const provinceAll = await axios.get('api/province') $('province').innerHTML += provinceAll.data.data.map(item => `${item}`).join('') $('province').value = province // 市数据 const cityAll = await axios.get('api/city?pname=' + province) $('city').innerHTML += cityAll.data.data.map(item => `${item}`).join('') $('city').value = city // 区数据 const areaAll = await axios.get(`api/area?pname=${province}&cname=${city}`) $('area').innerHTML += areaAll.data.data.map(item => `${item}`).join('') $('area').value = area } // 调用回填方法 getInfo() // 省数据下拉框 $('province').addEventListener('change', async () => { // 获取省下市数据 const cityAll = await axios.get('api/city?pname=' + $('province').value) // 渲染市数据 $('city').innerHTML = cityAll.data.data.map(item => `${item}`).join('') // 获取市下区数据 const areaAll = await axios.get(`api/area?pname=${$('province').value}&cname=${$('city').value}`) // 渲染区数据 $('area').innerHTML = areaAll.data.data.map(item => `${item}`).join('') }) $('city').addEventListener('change', async () => { const areaAll = await axios.get(`api/area?pname=${$('province').value}&cname=${$('city').value}`) $('area').innerHTML = areaAll.data.data.map(item => `${item}`).join('') }) // 图片上传功能 $('upload').addEventListener('change',(e)=>{ // 非空判断 if(e.target.files.length===0){ return } // 创建FormData接收 const fd = new FormData() // 将图片数据添加到fd中 fd.append('avatar', e.target.files[0]) // 图片上传接口 axios.post('api/file',fd).then(res=>{ console.log(res); $('avatar').src = res.data.data.url // 给头像框input进行赋值，方便拿取数据 $('avatarInp').value = res.data.data.url }) }) // 图片点击事件 $('avatar').addEventListener('click',()=>{ // 优化图片上传功能 $('upload').click() }) // 上传点击事件 $('uploadAll').addEventListener('click', async (e)=>{ // 取消默认刷新操作 e.preventDefault() // 用serialize获取表单中所有内容(前面给头像框input赋值的应用) const userFormall = serialize($('userForm'),{hash:true}) try { // 执行成功,上传数据并弹出ok弹框 await axios.put('api/settings',userFormall) alert('ok') } catch (error) { alert('error') } }) 本文来自博客园，作者：三井绫子，转载请注明原文链接：https://www.cnblogs.com/Ayako/p/16900651.html