vue头像的上传

个人中心_头像修改

目标

• 点击头像出现文件选择器

• 获取文件对象

• 上传图片文件对象, 表单给后台

移花接木: 点击图片, js模拟点击了input[type=file]标签出现选择图片窗口

步骤

1. 先实现前端点击获取文件对象效果

<van-cell title="头像" is-link center>
    <template #default>
        <van-image round class="avatar" :src="profile.photo" @click="$refs.iptFile.click()"/>
        <!-- file 选择框 -->
        <input
               type="file"
               ref="iptFile"
               v-show="false"
               accept="image/*"
               @change="onFileChange"
               />
    </template>
</van-cell>

<script>
export default {
  methods: {
    // 文件选择方法
    onFileChange (ev) {
      console.log(ev.target.files[0])
    }
  }
}
</script>

2. 接口定义

// 用户- 更新头像
// 注意: formObj的值必须是一个表单对象
// '{"a": 10, "b": 20}' 
// 对象格式的JSON字符串
// new FormData() 
// 表单对象
exportconstupdatePhotoAPI=(formObj)=>{
return request({
    url:'/v1_0/user/photo',
    method:'PATCH',
    data: formObj
    // 如果你的请求体内容是表单对象, 浏览器会自动携带请求头Content-Type为multipart/form-data
})
}

3. 引入接口, 传入表单对象, 更新页面

import{ updatePhotoAPI }from'@/api'exportdefault{
  methods:{
// 文件选择方法
asynconFileChange(ev){
//   
console.log(ev.target.files[0])
if(ev.target.files.length===0)
return
// 防止用户未选择图片
const fd =newFormData()
    fd.append('photo', ev.target.files[0])
// photo在表单里参数名携带
const res =awaitupdatePhotoAPI(fd)
console.log(res)
this.profile.photo= res.data.data.photo
// 更新最新头像
}}
}

小结

1. 什么是表单隐藏域?

• 给用户看A标签, 点击A标签

• JS代码监测A点击事件, 触发B标签标签的事件

2. 前端如何创建表单对象?

• new FormData