在前端開發中，為了更好的用戶體驗，在頭像上傳時會先將圖片顯示到頁面然后點擊保存按鈕 完成圖片的上傳成功 代碼部分有參考他人的寫法。

html代碼：

請上傳圖片

js代碼：

//實時顯示該圖片在頁面

great(){

document.getElementById('saveImage').onchange = function () {

var imgFile = this.files[0];

var fr = new FileReader();

fr.onload = function () {

document.getElementById('portrait').src = fr.result;

};

fr.readAsDataURL(imgFile);

}

},

js代碼部分說明：因為是在vue的methods方法中申明的函數，所以還需要在mounted 方法中使用this.great()掛載該方法。

圖片上傳部分的js代碼：

imageSubmit(){

let x = document.getElementById('saveImage').files[0];

console.log(x);

let params = new FormData() ; //創建一個form對象

params.append('file',x,x.name); //append 向form表單添加數據

//添加請求頭 通過form添加的圖片和文件的格式必須是multipart/form-data

let config = {

headers:{'Content-Type':'multipart/form-data'}

};

this.$axios.post("/user/image",params,config)

.then(function(res){

console.log(res);

this.imageSave = res.data.image;

sessionStorage.setItem('headImg',this.imageSave); //將圖片保存，并能夠在其他地方加載顯示

router.go(0); //刷新頁面，頭像改變

}.bind(this))

.catch(function (error) {

console.log(error);

})

}

},

最終效果圖：

注：在后來的開發過程中發現，上傳圖片在上傳服務器前在頁面加載可以使用

var windowURL = window.URL || window.webkitURL;

以上這篇vue中使用axios post上傳頭像/圖片并實時顯示到頁面的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的axios获取图片显示_vue中使用axios post上传头像/图片并实时显示到页面的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。