vue中input標簽上傳本地文件或圖片后獲取完整路徑的方法

本篇內(nèi)容主要講解“vue中input標簽上傳本地文件或圖片后獲取完整路徑的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue中input標簽上傳本地文件或圖片后獲取完整路徑的方法”吧!

首先我的input標簽代碼是這樣的。id是用來標識的，為了更好的獲取dom，name是為了實現(xiàn)圖片上傳時的參數(shù)名。

 <input type="file" id="fileImage" name="fileImage" @change="showImg">

圖片渲染代碼

<img id="img1" src="" alt="" width="120px" height="100px">

由于瀏覽器的加密功能，我們無法完整的獲取到圖片或者文件的完整地址。只能得到C：//fakepath//具體文件名 最初我的做法是通過獲取dom元素，然后直接獲取到input標簽的value值，但是只能獲取到最后的名字，比如說你的完整路徑是E:\medicineOfCH\stageImage\123.jpg 那么ipt.value只能得到123.jpg這個值。

解決辦法：

showImg(){
  /*     let ipt=document.getElementById('fileImage');
      console.log(ipt.value)
      this.imageUrl=ipt.value
 */
     
      var file = document.getElementById('fileImage').files[0];
      console.log(file)
   if (window.FileReader) {    
            var reader = new FileReader();    
            reader.readAsDataURL(file);    
            //監(jiān)聽文件讀取結束后事件    
          reader.onloadend = function (e) {
           //e.target.result就是最后的路徑地址
            document.getElementById("img1").setAttribute("src",e.target.result)
            console.log("***"+e.target.result);
             
            };    
       }
    }

代碼解釋：

查找資料發(fā)現(xiàn)可以通過獲取到dom元素，再使用自帶的一個files數(shù)組得到第一個元素就是當前你選擇的文件或者圖片。之后唯一需要注意的點就是這一句代碼document.getElementById(“img1”).setAttribute(“src”,e.target.result) img1是img標簽的id，setAttribute是為當前dom元素設置屬性值，這句代碼就是設置img中原有的src屬性，可以看見最初的src屬性值我是設置為空字符串的，然后在這里設置成了剛剛選擇的文件地址。e.target.result就是最后的路徑地址。所以我的前面兩個問題都解決了，只要獲得了完整路徑就可以立馬回顯圖片了。
那么最重要的 來了。什么時候開始獲取呢？在這里我參考了以為博主的博客。文后貼出地址。
我們書寫了mousedown，mouseup，click，input，change，focus，blur綁定到了input上面，模擬點擊選擇了一個文件，觸發(fā)事件的流程是下面這樣的：
（1）mousedown
（2）focus
（3）mouseup
（4）click
（5）blur
（6）focus
（7）change
首先觸發(fā)了鼠標按下事件，然后就是焦點到了input上面，然后鼠標抬起，觸發(fā)click點擊事件，失去焦點以后彈出了文件選擇框，選中文件以后觸發(fā)焦點，最后觸發(fā)的change事件。如果你沒有選擇文件的話，直接點擊取消的話，就不會觸發(fā)change事件。所以說，如果要監(jiān)聽input 的type=file的內(nèi)容變更事件的話，最好直接用change事件去監(jiān)聽。所以你可以發(fā)現(xiàn)我的input框設置了@change事件，通過改事件我們開始獲取地址和回顯地址。
console.log(document.getElementById(‘fileImage’).files)打印出來的files，發(fā)現(xiàn)只有一個文件，長度為一，因為我們這里不是多選，二是單選。

console.log(file)打印出來的完整路徑：

到此，相信大家對“vue中input標簽上傳本地文件或圖片后獲取完整路徑的方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！