vue+elementUi+el-upload实现上传、获取本机文件路径、获取本机服务器路径、电脑盘符、createObjectURL、getElementsByClassName

HTML

<el-upload action="" :limit="1" :on-change="handleChange" :auto-upload="false" :file-list="fileList" :show-file-list="false" > <span>选择文件 data() { return { fileList: [] }; }, methods: { // 选择文件 handleChange(file, fileLists) { console.log(file); console.log(fileLists); // 本地服务器路径 console.log(URL.createObjectURL(file.raw)); // 虚拟盘符 // JavaScript无法获取本地文件路径 // JavaScript不支持对本地资源的操作 console.log(document.getElementsByClassName("el-upload__input")[0].value); }, }, }; 

createObjectURL

MDN

URL.createObjectURL()静态方法会创建一个DOMString，其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定。这个新的URL对象表示指定的File对象或Blob对象。

getElementsByClassName

菜鸟教程

getElementsByClassName()方法返回文档中所有指定类名的元素集合，作为NodeList对象。 NodeList对象代表一个有顺序的节点列表。NodeList对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。 你可以使用NodeList对象的length属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。

MDN

返回一个包含了所有指定类名的子元素的类数组对象。当在document对象上调用时，会搜索整个DOM文档，包含根节点。你也可以在任意元素上调用getElementsByClassName()方法，它将返回的是以当前元素为根节点，所有指定类名的子元素。

HTMLCollection

定义

HTMLCollection对象是HTML元素的类似数组的列表。 诸如getElementsByTagName之类的方法会返回HTMLCollection。

属性和方法

属性/方法 描述 item() 返回HTMLCollection中指定索引处的元素。 length 返回HTMLCollection中的元素数。 namedItem() 返回HTMLCollection中有指定ID或名称的元素。 URL

MDN

URL接口用于解析，构造，规范化和编码URL。它通过提供允许您轻松阅读和修改URL组件的属性来工作。通常，通过在调用URL的构造函数时将URL指定为字符串或提供相对URL和基本URL来创建新的URL对象。然后，您可以轻松读取URL的已解析组成部分或对URL进行更改。 如果浏览器尚不支持URL()构造函数，则可以使用Window中的Window.URL (en-US)属性。确保检查您的任何目标浏览器是否要求对此添加前缀。

document

菜鸟教程

当浏览器载入HTML文档, 它就会成为Document对象。 Document对象是HTML文档的根节点。 Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。 Document对象是Window对象的一部分，可通过window.document属性对其进行访问。

MDN

Document接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是DOM树(en-US)。 DOM树包含了像、这样的元素，以及大量其他元素。它向网页文档本身提供了全局操作功能，能解决如何获取页面的URL，如何在文档中创建一个新的元素这样的问题。 EventTarget <= Node <= Document Document接口描述了任何类型的文档的通用属性与方法。根据不同的文档类型(例如HTML、XML(en-US)、SVG，……)，还能使用更多API。使用"text/html"作为内容类型(content type)的HTML文档，还实现了HTMLDocument接口，而XML和SVG文档则(额外)实现了XMLDocument接口。

注意

JavaScript不支持对本地资源的操作，除了选择文件上传和存储到本的一些操作外，其他操作本地资源均不支持。