在看下面内容之前,请一定要去看看 element-plus 中上传组件 el-upload组件
上传组件
重点关注下面几个属性
:auto-upload=“false” , 关闭自动上传
:on-change=“onUploadFile” 监听上传情况
简单示例:

方式一: URL.createObjectURL()

注意:

我这里 定义 formModel 为提交数据 , 这个和后端接口有关,情根据实际进行设计

const imgUrl = ref('')  // 预览图片路径  const onUploadFile = (uploadFile) => {   imgUrl.value = URL.createObjectURL(uploadFile.raw)   formModel.value.cover_img = uploadFile.raw   // console.log('上传文件', formModel.value) } 

介绍 URL.createObjectURL()

参数: 用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。​
返回值: 一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容。
使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存
所以上面的代码可以进行优化:

const onUploadFile = (uploadFile) => {   if (imgUrl.value) {     URL.revokeObjectURL(imgUrl.value)     imgUrl.value = ''   }   imgUrl.value = URL.createObjectURL(uploadFile.raw)   console.log(imgUrl.value)   formModel.value.cover_img = uploadFile.raw   // console.log('上传文件', formModel.value) } 

超详细URL.createObjectURL,还有例子!!!还有对比FileReader.readAsDataURL(file)

方式二: readAsDataURL

使用了FileReader对象来读取文件内容，并将其转换为base64编码的字符串。FileReader是一个读取文件内容的API，它可以异步读取文件内容并将其转换为纯文本或DataURL。
详解

拓展
@click=“uploadRef.$el.querySelector(‘input’).click()”
这里就是通过 querySelector（“input”） 获取DOM元素,然后调用 click() 方法
querySelector 和 querySelectorAll，它们是 DOM API 的一部分，用于根据 CSS 选择器在文档中查询元素。

1. querySelector:

   • 这个方法返回文档中匹配指定 CSS 选择器的第一个元素。如果没有找到匹配的元素，它将返回 null。

2. querySelectorAll:

   • 这个方法返回一个 NodeList 对象，包含了文档中所有匹配指定 CSS 选择器的元素。如果没有找到任何元素，它将返回一个空的 NodeList 对象。

以下是 querySelector 和 querySelectorAll 的用法示例：

// 使用 querySelector 获取第一个匹配的元素 const firstElement = document.querySelector('.my-class');  // 使用 querySelectorAll 获取所有匹配的元素 const allElements = document.querySelectorAll('.my-class');  // NodeList 对象可以使用 length 属性来获取元素数量 if (allElements.length > 0) {   // 获取第一个元素   const firstElement = allElements[0];   // 获取最后一个元素   const lastElement = allElements[allElements.length - 1]; } 

code