vue input type=file 获取文件本地路径

最新推荐文章于 2025-07-08 10:59:34 发布

Shuah153

最新推荐文章于 2025-07-08 10:59:34 发布

阅读量5w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： js vue 文章标签： vue input=file获取文件本地路径

本文链接：https://blog.youkuaiyun.com/weixin_36934930/article/details/80552397

vue 同时被 2 个专栏收录

19 篇文章

订阅专栏

16 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的文件上传实时预览功能。通过监听文件输入框的更改事件，可以即时获取所选文件并将其转换为DataURL格式，以便在页面上显示所选图片的预览。此功能适用于需要用户上传头像或其他图片的应用场景，能提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

templat

<input type="file" :id="id" name="image" class="getImgUrl_file" @change="preview($event)">

srcipt

    preview(event){
      let files = document.getElementById(this.id).files[0]
      this.imgDataUrl =this.getObjectURL(files)
      this.$emit('sendImgUrl',this.imgDataUrl,this.id)
    },
    getObjectURL (file) {
      let url = null ;
      if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
      }else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
      }else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
      }
      return url ;
    },