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

针对Vue中如何获取本地文件或图片的完整路径，下面是一份完整攻略：

问题阐述

在Vue中使用input标签上传本地文件或图片，常见的困难在于如何获取完整路径，以便实现相关功能。因为在浏览器架构下，为了保护用户隐私，直接获取文件路径的方法是无效的。

解决方法

方法一：使用URL.createObjectURL()

URL.createObjectURL() 方法会创建一个地址，该地址将指向文件参数，可以用于在 Web 应用程序中显示引用的文件。

具体使用方法如下：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileInputChange"/>
  </div>
</template>

<script>
export default {
  methods: {
    handleFileInputChange() {
      const uploadedFile = this.$refs.fileInput.files[0];
      const uploadedFileUrl = URL.createObjectURL(uploadedFile);
      console.log(uploadedFileUrl);
    }
  }
}
</script>

代码中，先使用refs获取file类型的input元素，再在handleFileInputChange()方法中获取到上传的文件对象，并使用URL.createObjectURL()方法获取到文件地址。最后将文件地址存储在组件中或者发送到后台，实现相关的功能。

方法二：使用FileReader

FileReader 对象让 Web 应用程序可以异步读取存储在用户计算机上的文件的内容，使用它可以实现获取本地文件的完整路径。具体使用方法如下：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileInputChange"/>
  </div>
</template>

<script>
export default {
  methods: {
    handleFileInputChange() {
      const uploadedFile = this.$refs.fileInput.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(uploadedFile);
      reader.onload = e => {
        console.log(e.target.result);
      }
    }
  }
}
</script>

在代码中，同样是使用refs获取file类型的input元素，在handleFileInputChange()方法中，创建一个FileReader对象，使用readAsDataURL()方法异步加载文件，最后使用reader.onload事件获取文件地址。同样，文件地址可以存储在组件中或者发送到后台。

总结

以上两种方法均可以实现Vue中获取上传文件或图片地址的功能，具体使用需要依据业务场景进行选择。如果需要获取文件的二进制数据，使用FileReader更为便利。如果仅需要获取文件地址，使用URL.createObjectURL()方法则简单便捷。