vue头像的上传

最新推荐文章于 2024-01-30 17:11:39 发布

qq_40745468

最新推荐文章于 2024-01-30 17:11:39 发布

阅读量200

点赞数

分类专栏： vue JavaScript node 文章标签： javascript 前端 html Powered by 金山文档

本文链接：https://blog.csdn.net/qq_40745468/article/details/128928220

版权

vue 同时被 3 个专栏收录

42 篇文章 0 订阅

订阅专栏

JavaScript

14 篇文章 0 订阅

订阅专栏

node

11 篇文章 0 订阅

订阅专栏

文章介绍了如何在前端实现点击头像触发文件选择器，获取图片文件对象，然后使用FormData创建表单对象并调用接口上传到后台，最终更新用户头像的过程。涉及到的关键技术包括JavaScript事件监听、隐藏表单元素以及Vue组件的运用。

摘要由CSDN通过智能技术生成

个人中心_头像修改

目标

点击头像出现文件选择器

获取文件对象

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

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

步骤

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

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

接口定义

// 用户- 更新头像
// 注意: 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
})
}

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

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
// 更新最新头像
}}
}