el-button增加下载功能

vue3和element-plus

<el-upload
  v-model:file-list="fileList"
  action="/api/upload"
  multiple
  :limit="1"
  :headers="headers"
>
  <el-button type="primary">选择文件</el-button>
  <template #file="{ file }">
    <div style="display: flex; justify-content: space-between;align-items: center;">
      <a target="_blank" :href="file.url">{{ file.name }}</a>
      <el-icon style="cursor: pointer;" @click="removeFile(file, fileList)"><CloseBold /></el-icon>
    </div>
  </template>
</el-upload>

方法

const userInfo = JSON.parse(localStorage.getItem('userInfo'))
const headers = {
  Authorization: 'Bearer ' + userInfo.accessToken
}
const fileList = ref([])

// 点×的
const removeFile = (file, list) => {
  removeValue.value.push(file.id)
  for (let i = 0; i < list.length; i++) {
    if (list[i].name === file.name && list[i].url === file.url) {
      list.splice(i, 1)
    }
  }
}