当我们需要上传文件时，经常需要获取我们上传文件的地址，以便我们可以对其进行预览和操作。Vue可以通过input元素获取到我们选择的文件，再进行对应的操作，本文将详细介绍Vue如何获取文件地址。

<template><div><input type="file" onchange="onFileChange" /></div></template><script>export default {
name: "GetFile",
methods: {
onFileChange(e) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.createImage(files[0]);
},
createImage(file) {
let reader = new FileReader();
let vm = this;
reader.onload = (e) =>{
vm.imgUrl = e.target.result;
};
reader.readAsDataURL(file);
},
},
};
</script><style>// 略
</style>

上述代码中，我们使用input元素来获取用户选择的文件。当用户选择文件后，会触发onFileChange函数，在函数中我们首先获取到用户选择的文件，然后将文件传递给createImage函数进行处理。createImage函数中，我们使用FileReader对象对文件进行读取，最终将文件的地址保存在imgUrl中，方便我们后续使用。

onFileChange(e) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
let file = files[0];
let formData = new FormData();
formData.append("file", file);
axios
.post("/upload", formData)
.then((response) =>{
console.log(response.data);
})
.catch((error) =>{
console.log(error);
});
},

如果我们需要将该文件上传至服务端，使用Vue结合axios可以轻松实现。在onFileChange函数中，我们首先将选择的文件保存在FormData对象中，然后将该对象通过POST请求发送至服务端，服务端可以获取到该文件，并且上传成功后返回文件地址给我们。

综上所述，Vue非常方便的帮我们获取到选择文件的地址，并且与axios相结合，可以轻松实现文件上传功能，方便我们继续对文件进行操作。