在vue中通过axios post上传头像/图片并实时显示到页面的方法

在前端开发中，为了更好的用户体验，在上传头像时，会先将图片显示在页面上，然后点击保存按钮，成功完成图片上传。

Html代码：

div id=' my photo ' v-show=' personal photo ' div class=' viewport ' img src=' http : ' alt=' id='人像' style=' width: 300px高度： 300 px//Div class=' listbox ' dl dt请上传图片/dt DD输入类型=' file ' id=' save image ' name=' my photo '/DD/dl/Div class=' save '输入类型=' button ' value=' save picture ' @ click=' imageSubmit '/Div/Div js代码：

//在页面上显示图片great(){ document . getelementbyid(' save image ')。onchange=function(){ var img file=this . files[0]；var fr=new FileReader()；fr . onload=function(){ document . getelementbyid('纵向')。src=fr.result};fr . readasdataurl(IMgfile)；} }，js代码部分解释：因为是vue的methods方法中声明的函数，所以需要在mount方法中使用this.great()来挂载这个方法。

图像上传部分的Js代码：

imageSubmit(){ let x=document . getelementbyid(' save image ')。文件[0]；console . log(x)；let params=new FormData()；//创建表单对象params.append('file '，x，x . name)；//将添加数据追加到表单//添加请求头。通过表单添加的图片和文件的格式必须是multipart/form-datalet config={ headers : { ' content-type ' : ' multipart/form-data ' } }；这个。$axios.post('/user/image '，params，config)。然后(函数(RES){ console . log(RES)；this . imagesave=RES . data . image；session storage . setitem(' head img '，this . imagesave)；//保存图片，加载并在其他地方显示router . go(0)；//刷新页面，更改头像}。绑定(这个))。catch(函数)(错误){console.log(错误)；})}}，最终渲染：

注意：在后期的开发过程中，发现上传的图片在上传到服务器之前加载到页面上时可以使用

var windowURL=window。URL | | window.webkitURL使用axios post上传头像/图片并在上述vue中实时显示在页面上的方法，就是边肖与大家分享的全部内容。希望能给大家一个参考，支持我们。