vue3使用element ui plus实现文件上传功能,可实现自定义处理上传列表，文件类型限制。

有的时候会对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;
}