Vue上傳圖片

最近寫上傳圖片功能，一直不理解是怎麼實現的，今天看了後端的接口實現，才知道大體流程。
後臺接口接受一個input提交的文件，將其保存，並將文件名返回。將此返回的內容當作img標籤的src便可，展現圖片
(1)form表單實現
html:

<form name="imgForm" id="imgForm" enctype="multipart/form-data" action="圖片上傳接口" method='post'>
    <input class="input-loc-img"  name="imgLocal" id="imgLocal" type='file' accept="image/*" @change="selectImg" />
</form> 
js:
selectImg(){
    let form=document.getElementById('imgLocal');
    form.submit();
}

(2)ajax實現（Vue推薦的axios）

let that=this;
let imgFile = $(this.$el).find('#imgLocal')[0].files[0];//取到上傳的圖片
console.log($(this.$el).find('#imgLocal')[0].files);//由打印的能夠看到，圖片    信息就在files[0]裏面
let formData=new FormData();//經過formdata上傳
formData.append('file',imgFile);
this.$http.post('圖片上傳接口',formData,{
method: 'post',
headers: {'Content-Type': 'multipart/form-data'}
}).then(function (res) {
console.log(res.data);//
}).catch(function(error){
console.log(error);
})