當我們需要上傳文件時，經常需要獲取我們上傳文件的地址，以便我們可以對其進行預覽和操作。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相結合，可以輕松實現文件上傳功能，方便我們繼續對文件進行操作。