基于Vue与Element-UI实现文件选择、路径获取及上传功能
HTML结构
以下是用于文件上传的HTML代码：
<el-upload
action=""
:limit="1"
@file-change="handleFileChange"
:auto-upload="false"
:files="selectedFiles"
:show-file-list="false">
<span>选择文件</span>
</el-upload>
JavaScript逻辑
下面展示了如何通过Vue方法捕获用户选择的文件，并生成一个临时URL：
export default {
data() {
return {
selectedFiles: []
};
},
methods: {
handleFileChange(newFile, fileList) {
console.log('当前文件:', newFile);
console.log('所有文件列表:', fileList);
// 创建文件的临时访问链接
if (newFile.raw) {
const tempUrl = window.URL.createObjectURL(newFile.raw);
console.log('临时文件URL:', tempUrl);
}
// 尝试获取文件输入框的值（仅能获取虚拟路径）
const fileInput = document.querySelector('.el-upload__input');
console.log('文件输入框值:', fileInput.value); // 输出类似 C:\fakepath\example.txt
}
}
};
createObjectURL详解
根据MDN文档，URL.createObjectURL() 方法可以创建一个指向指定文件或二进制大对象（Blob）的URL字符串。该URL与创建它的窗口绑定，当窗口关闭时会被自动释放。
getElementsByClassName用法
document.getElementsByClassName() 返回一个包含所有指定类名元素的动态集合 (HTMLCollection)。可以通过索引访问这些元素，例如 elements[0]。
示例代码如下：
const elements = document.getElementsByClassName('example-class');
console.log('匹配到的元素数量:', elements.length);
if (elements.length > 0) {
console.log('第一个匹配元素:', elements[0]);
}
HTMLCollection概述
HTMLCollection 是一种类似数组的对象，包含一组DOM元素。常用方法包括：
item(index): 根据索引返回集合中的某个元素。namedItem(name): 根据ID或名称返回特定元素。
URL接口说明
URL 接口允许解析和操作URL。如果浏览器不支持 URL 构造函数，则可以使用全局的 window.URL 属性作为替代。
Document对象介绍
Document 对象表示HTML页面的根节点，提供了访问页面中所有元素的能力。它是 Window 对象的一部分，可通过 window.document 访问。
注意事项
出于安全原因，现代浏览器禁止JavaScript直接访问本地文件系统。虽然可以选择文件并上传，但无法读取其完整路径。
