vue3+ts el-upload

vue文件

<template>
  <div>
    <el-upload
      ref="upload"
      class="upload-demo"
      drag
      multiple
      action=""
      :disabled="disabled"
      :auto-upload="true"
      :limit="10"
      :before-remove="beforeRemoveFn"
      :on-preview="handlePreviewFn"
      :on-exceed="handleExceedFn"
      :file-list="fileList"
      :http-request="uploadFileFn"
    >
      <div v-if="!disabled">
        <div class="container">
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">将文件拖到此处，或<br /><em>点击上传</em></div>
        </div>
        <p class="el-upload__tip">1.最多可上传10个附件，附件大小不得超过8M;</p>
      </div>
      <div v-else>
        <p>不可以上传附件或删除附件</p>
      </div>
    </el-upload>
  </div>
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { deleteAttachmentAPI, downloadAPI, uploadFilesAPI } from './jiekou'

const disabled = ref(false)
const fileList = ref<any>([])

// 删除上传文件
const beforeRemoveFn = (file: any) => {
  const { id } = file
  deleteAttachmentAPI({ id }).then(() => {
    ElMessage({ type: 'success', message: '删除成功' })
  })
}
// 下载文件
const handlePreviewFn = (file: any) => {
  if (file.url) downloadAPI(file.id)
}
// 选取文件超过数量提示
const handleExceedFn = () => {
  ElMessage({ type: 'error', message: '最多支持10个附件上传' })
}
// 上传文件
const uploadFileFn = (val: any) => {
  const formData = new FormData()
  formData.append('files', val.file)
  formData.append('category', 'imp')
  uploadFilesAPI(formData).then((res: any) => {
    res.data.forEach((item: any) =>
      fileList.value.push({
        name: item.attachmentName,
        url: item.attachmentPath,
        id: item.attachmentId,
      })
    )
  })
}
</script>
<style lang="scss" scoped>
.upload-demo {
  ::v-deep .el-upload-dragger {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 619px;
    height: 84px;
    line-height: 17px;
    border: 1px solid #d0d2d7;

    .container {
      display: flex;
      align-items: center;
    }

    .el-upload__text {
      font-size: 12px;
      text-align: start;
    }

    i {
      margin: 0 5px 0;
      font-size: 20px;
    }
  }
}
</style>

axios文件

import axios from 'axios'
import type { AxiosRequestConfig, AxiosResponse } from 'axios'

export interface HttpResponse<T = unknown> {
  status: number
  msg: string
  code: number
  data: T
}
export function get<T = any>(url: string, params?: any, config?: AxiosRequestConfig) {
  return axios
    .get<HttpResponse<T>>(url, {
      ...config,
      params,
    })
    .then((respose) => {
      return respose.data.data
    })
}

export function post<T = any, D = any>(url: string, data?: D, config?: AxiosRequestConfig) {
  return axios.post<HttpResponse<T>>(url, data, config).then((respose) => {
    return respose.data.data
  })
}
export function del<T = any>(url: string, config?: AxiosRequestConfig) {
  return axios.delete<HttpResponse<T>>(url, config).then((respose) => {
    return respose.data.data
  })
}

const handelBlobResponse = (response: AxiosResponse<Blob, any>) => {
  const href = URL.createObjectURL(response.data)
  const a = document.createElement('a')
  a.style.display = 'none'
  a.href = href
  let filename = ''
  const content = response.headers['content-disposition'] // 注意是全小写，自定义的header也是全小写
  if (content) {
    const name = content.match(/filename=(.*)/)![1]
    filename = decodeURIComponent(name)
  }
  a.download = filename
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}

export function download(url: string, params?: any, config?: any) {
  return axios
    .get<Blob>(url, {
      ...config,
      params,
      responseType: 'blob',
    })
    .then(handelBlobResponse)
    .catch((err) => {
      console.error(err)
    })
}

export function postDownload(url: string, data?: any, config?: any) {
  return axios.post<Blob>(url, data, {
    ...config,
    // responseType: 'blob',
  })
  // .then(handelBlobResponse)
}