Web前端之Vue+Element-Ui+el-upload实现选择文件时获取本机服务器路径、上传、getElementsByClassName、createObjectURL、document

编程录(MJ682517)

已于 2024-09-25 12:18:06 修改

阅读量1.4w

点赞数 10

分类专栏： Web前端 Element Vue 文章标签：前端 web web前端 vue elementui

于 2022-05-07 20:38:58 首次发布

本文链接：https://blog.csdn.net/weixin_51157081/article/details/124638850

版权

Web前端同时被 3 个专栏收录

371 篇文章 6 订阅

订阅专栏

Vue

41 篇文章 0 订阅

订阅专栏

Element

10 篇文章 0 订阅

订阅专栏

Html

<el-upload
	action=""
	:limit="1"
	:on-change="handleChange"
	:auto-upload="false"
	:file-list="fileList"
	:show-file-list="false"
>
	<span>选择文件</span>
</el-upload>

JavaScript

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