有的时候会对element ui 的上传文件功能模糊，简单做一个思路梳理和组件使用。代码内贴有注释，详细介绍代码使用规则。
思路
添加上传组件，控制传输文件的类型，可自定义绘制文件列表，上传文件时，触发文件上传接口，上传文件到服务器，返还文件的路径，从而触发点击删除文件等功能。前端可以通过文件路径实现前端的下载和浏览功能。
代码实现，内含注释
<el-upload
:disabled="data.length >= 9 ? true : false"
multiple
action="/"
:limit="9"
:auto-upload="false"
:show-file-list="false"
:on-change="uploadFile"
:on-exceed="overLimit"
:on-preview="openImg"
v-model:file-list="state.uploadList"
accept=".jpg, .jpeg">
上传文件
</el-upload>
<!--
注释：
disabled 是否禁用
multiple 是否支持多个文件
limit 文件上传限制
action 触发行为，一般我们这里是不会使用默认的上传action的。auto-upload为true时，就会触发该行为
show-file-list 是否展示默认的文件列表，如果需要自定义，我们也可以进行自定义进行处理
on-change 图片上传时，会进行触发该事件
on-exceed 超于limit的限制时候，会触发该事件
on-preview 点击默认的文件列表的时候，会触发该事件，默认返还上传的该文件
accept 处理文件的接受类型，默认上传框内只支持这些类型，但是如果选择全部文件也可以上传其他文件，我们可以通过其他方法进行限制文件处理的类型。
-->
<!-- 自定义上传文件列表 -->
<div v-if="data.length > 0">
<div>
<p v-for="(item, index) in state.uploadList">
<span @click="openImg(item)">
{
{ item.name }}
</span>
<img src="·······/图片路径" class="delete_icon" alt="" @click="deleteImg(item)">
</p>
</div>
</div>
//通过该文件的url，可以打开该图片
const openImg = (val) => {
window.open(val.url, '_target')
}
//自定义文件列表时，删除事件的处理，删除指定文件
const deleteImg = (file) => {
let uploadFiles = state.uploadList
for (var i = 0; i < uploadFiles.length; i++) {
if (uploadFiles[i]['url'] == file.url) {
uploadFiles.splice(i, 1)
}
}
}
//超出文件列表进行报错
const overLimit = () => {
ElMessage.warning(`最多只能上传9个文件`);
}
//上传文件时，进行文件类型判断处理 进行二次的文件格式判断处理
const uploadFile = async (file) => {
let typeArray = ['jpg', 'jpeg'];
let isType = typeArray.some((ele) => {
return file.raw.type.indexOf(ele) > -1
})
if (!isType) {
ElMessage.warning(`上文件格式支持：.jpg,.jpeg`);
deleteImg(file); //不符合条件就删除处理
return false;
}
//通过调用文件路径接口，获取上传后静态资源的文件路径，返还到前端进行展示。
let res = await api.uploadGetImgUrl(file);
file.url = res.data;
}