«

vue中input标签上传本地文件或图片后获取完整路径的方法

时间:2024-5-24 15:38     作者:韩俊     分类: Javascript


本篇内容主要讲解“vue中input标签上传本地文件或图片后获取完整路径的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue中input标签上传本地文件或图片后获取完整路径的方法”吧!

首先我的input标签代码是这样的。id是用来标识的,为了更好的获取dom,name是为了实现图片上传时的参数名。

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

图片渲染代码

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

由于浏览器的加密功能,我们无法完整的获取到图片或者文件的完整地址。只能得到C://fakepath//具体文件名 最初我的做法是通过获取dom元素,然后直接获取到input标签的value值,但是只能获取到最后的名字,比如说你的完整路径是E:medicineOfCHstageImage123.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);    
            //监听文件读取结束后事件    
          reader.onloadend = function (e) {
           //e.target.result就是最后的路径地址
            document.getElementById("img1").setAttribute("src",e.target.result)
            console.log("***"+e.target.result);
             
            };    
       }
    }

代码解释:

查找资料发现可以通过获取到dom元素,再使用自带的一个files数组得到第一个元素就是当前你选择的文件或者图片。之后唯一需要注意的点就是这一句代码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上面,模拟点击选择了一个文件,触发事件的流程是下面这样的:
(1)mousedown
(2)focus
(3)mouseup
(4)click
(5)blur
(6)focus
(7)change
首先触发了鼠标按下事件,然后就是焦点到了input上面,然后鼠标抬起,触发click点击事件,失去焦点以后弹出了文件选择框,选中文件以后触发焦点,最后触发的change事件。如果你没有选择文件的话,直接点击取消的话,就不会触发change事件。所以说,如果要监听input 的type=file的内容变更事件的话,最好直接用change事件去监听。所以你可以发现我的input框设置了@change事件,通过改事件我们开始获取地址和回显地址。
console.log(document.getElementById(&lsquo;fileImage&rsquo;).files)打印出来的files,发现只有一个文件,长度为一,因为我们这里不是多选,二是单选。

console.log(file)打印出来的完整路径:

标签: javascript vue

热门推荐