vue实现头像上传

data() {
			return {
				userInfo: {
					avatar: 'https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=62d46c39067b020818c437b303b099b6/d4628535e5dde7119c3d076aabefce1b9c1661ba.jpg'
				}
			}
		},
		methods: {
			uploadHeadImg: function() {
				this.$el.querySelector('.hiddenInput').click()
			},
			// 将头像显示
			handleFile: function(e) {
				let $target = e.target || e.srcElement
				let file = $target.files[0]
				var reader = new FileReader()
				reader.onload = (data) => {
					let res = data.target || data.srcElement
					this.userInfo.avatar = res.result
				}
				reader.readAsDataURL(file)
			},
		}

.item_bock {
			label {
				width: 60px;
				height: 60px;
				img {
					width: 60px;
					height: 60px;
					border-radius: 50px
				}
				.hiddenInput {
					display: none;
				}
			}
		}

上传到后台服务器

// 将头像显示
			handleFile: function(e) {
				this.videoShow = false
				let $target = e.target || e.srcElement
				let file = $target.files[0]
				var reader = new FileReader()
				reader.onload = (data) => {
					let res = data.target || data.srcElement
					this.userInfo.avatar = res.result
				}
				reader.readAsDataURL(file)
				
				
				let files = e.target.files[0]
				let param = new FormData()
				param.append('file',files)
				param.append("user_id",localStorage.getItem('user_id'))
				param.append('token',localStorage.getItem('token'))
				this.getVidsubm(param)
			},



async getVidsubm(params) {
				let Vidsubm = await this.service.about.getImgsubm(params)
				console.log('图片上传', Vidsubm)
				this.shipin = Vidsubm.data
			},