快捷導(dǎo)航

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

更新時間：2023年04月24日 11:32:58 作者：H-rosy

本文給大家介紹vue中input標簽上傳本地文件或圖片后獲取完整路徑，如E:\medicineOfCH\stageImage\xxx.jpg，本文給大家分享完美解決方案，感興趣的朋友跟隨小編一起看看吧

前言：

好久沒有寫vue了。今天遇到一個需求：使用input框來上傳圖片類型，并且在選擇之后立刻回顯出來。使用< input type=“file”/>在選定圖片后再< img src=“xxx”/>。今天在實現(xiàn)這個需求的時候主要是出現(xiàn)了三個問題：

如何獲取文件完整路徑
如何選擇文件后立刻回顯圖片
什么時候獲取完整路徑和回顯圖片

先來解決第一個問題吧。如何獲取完整路徑，我也在csdn上面看了挺多博客才解決的，但是我發(fā)現(xiàn)大多數(shù)都是不太清楚的，就是有些講了但是沒有解釋，導(dǎo)致我看不懂，有些是無法實現(xiàn)功能。
首先我的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)聽文件讀取結(jié)束后事件    
          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元素設(shè)置屬性值，這句代碼就是設(shè)置img中原有的src屬性，可以看見最初的src屬性值我是設(shè)置為空字符串的，然后在這里設(shè)置成了剛剛選擇的文件地址。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框設(shè)置了@change事件，通過改事件我們開始獲取地址和回顯地址。
console.log(document.getElementById(‘fileImage’).files)打印出來的files，發(fā)現(xiàn)只有一個文件，長度為一，因為我們這里不是多選，二是單選。