vue项目中实现头像上传（axios请求）

最新推荐文章于 2024-09-10 09:49:28 发布

亦秦

最新推荐文章于 2024-09-10 09:49:28 发布

阅读量2.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue项目

本文链接：https://blog.csdn.net/lorraine1029/article/details/89671556

Vue项目专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍在Vue项目中如何实现用户头像的上传与更换功能。通过HTML、CSS和JavaScript代码片段，展示了如何使用input file元素触发文件选择，如何通过FormData对象封装图片数据，并通过axios或Vue-resource发送POST请求到后端接口。此外，还介绍了如何处理响应结果，包括成功上传后的状态提示和错误反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目中做个人资料时需要实现用户头像的更换

html部分

<template>  
  <div class="dataLeft">
	<p class="pic" style="width: 106px">
       <img :src="this.$picUrl+userInor.pic" alt="">//src部分是从后端获取的图像，再次不在赘述
    </p>
    <p class="upload">上传头像
	<input type="file" @change="upDataPic" enctype="" accept="image/*" class="uploadBtn"/>
    </p>
   </div>
</template>

css部分

<style>
.pic{
		width:106px;
		height:106px;
		overflow: hidden;
		border-radius:50%;
		background:white;
	}
.pic img{
		width: 100%;
		height: 100%;
	}
.upload{
		font-size:12px;
		text-align: center;
		line-height: 36px;
	}
</style>

js部分

<script>
upDataPic(e){								
	let file = e.target.files[0];  
	var picData=new FormData();
	picData.append('file',file,file.name);
	// console.log(picData)
	this.$http({
		url:"接口url",
		method:'post',
		data:picData,
	})
	.then(response=>{
		if(response.data.success==true){
			this.$swal.fire({//swal是引用的弹框插件，如需要，可百度查找
			    text:'上传成功',
				icon:'success'
			})
			this.userIcon=response.data.filePath;
			this.getInfor();
		}else{
			this.$swal.fire({//swal是引用的弹框插件，如需要，可百度查找
				text:res.data.msg
			})
		}
	})
	.catch(Error=>{
					
	})
}
</script>