快捷導(dǎo)航

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

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

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

前言：

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

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

先來(lái)解決第一個(gè)問題吧。如何獲取完整路徑，我也在csdn上面看了挺多博客才解決的，但是我發(fā)現(xiàn)大多數(shù)都是不太清楚的，就是有些講了但是沒有解釋，導(dǎo)致我看不懂，有些是無(wú)法實(shí)現(xiàn)功能。
首先我的input標(biāo)簽代碼是這樣的。id是用來(lái)標(biāo)識(shí)的，為了更好的獲取dom，name是為了實(shí)現(xiàn)圖片上傳時(shí)的參數(shù)名。

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

圖片渲染代碼

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

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

解決辦法：

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