在项目中上传头像，前端在input[type='file']中选择图像，并将格式数据传递给后端进行上传。 代码如下。
我写了组件。 参数如下：
上传类型：
窗口：图像显示宽度
高：图像显示高度
如果在imgUrl:之前有图像，则图像的路径地址
如果成功上传到组件，getImgUrl:将获取有关图像路径的参数。 此方法在父组件中调用，以获取子组件返回的图像路径参数。 此事件将根据需要检查在父组件中上载后返回的图像的路径是否是必需的，如果不需要，是否可以不写。
upload 3360 upload type=' ` head ` ' : imgwidth=' ` 85px ` ' : imgheight=' ` 104 px ` ' 3360 imgurl ' @ up gurl '子组件返回的图像路径的相关参数(/)。upload组件的代码templatedivclass=' avatar ' div @ mouse over=' show BG=true ' @ mouseleave=' show BG=false ' DDE 点击上传/div input type=' file ' class=' input-file ' 3360 style=' ` width 3360 $ { iid th 3360 } height : $ { imgheith ` ' name=' avatar ' ref=' avatar input ' @ change=' change image ($ event ) ) accept='image/gif，image/jpeg，image height: ${imgHeight}； ` ' name=' avatar '/divdivclass=' text ' @ click=' upload ' v-if=' file '上传/div/div/templatescriptexpore showBg: false } } )、props: )、uploadtype、imgUrl )、imgwww created (this.avatar=this.imgurl )、 methods: )变更图像：功能(e ) letfile=e.target.files[ if(file ) this.file=fileconsole.log ) thile ader.readasdataure reader.onload=function (e )//这里的this指向readerthat.Avatar=this.result ) }， upload: function () let files=this.$ refs.avatar input.filesletfiledata={ } if (filesinstanceofarray ) filedata ) else { filedata=this.file }/console.log (' filedata '，typeof fileData，filedata ) let data=new FormData ) )数据文件this.uploadType ) this.$ store.dispatch (upload _ head )，data ).then let data=res.data.data； this.$Emit('upload '，data )； this.$ message ({ type : ' success '，message: '上传成功！ ' }}.catch(err={console.log ) err ) if ) err.data.msg ) this.$message ) type:'error '，message : err . input-file { position : absolute； top: 0； left: 0； opacity: 0； cursor: pointer； } .bg { width: 100%； height: 100%； color: #fff； 背景色： rgba (0，0，0，0.3 )； 文本对齐3360中心； cursor: pointer； 位置： absolute； top: 0； left: 0； } .text { padding-top: 10px； color :轻型蓝色； }}/style