vue3 ts element-plus 文件上传

最近在使用 Vue3 和 TypeScript 开发项目时，遇到了一个需要进行文件上传的场景，于是就使用了 Element-Plus 的上传组件来完成这个功能。

Element-Plus 是基于 Vue3 的 UI 组件库，提供了一些比较常用的组件，其中包括了文件上传组件。在使用文件上传组件时，需要传入文件上传的API地址和文件上传的前缀，可以通过props属性进行传值。例如：

<el-upload
  :action="url"
  :auto-upload="false"
  :before-upload="beforeUpload"
  :file-list="fileList"
  list-type="text"
  ref="upload"
  :on-success="handleSuccess"
  :on-error="handleError"
>
  <el-button
    type="primary"
    :loading="uploading"
    size="small"
  >
    上传文件
  </el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

其中，`:action` 表示文件上传的 API 地址，`:before-upload` 表示文件上传之前的钩子函数，用于限制上传文件类型和大小，`:file-list` 表示已上传的文件列表，`:on-success` 和 `:on-error` 表示上传成功和上传失败的回调函数。

在使用 TypeScript 进行开发时，需要对元素进行类型定义，以便更好地使用。例如，定义一个类型为 `FileList` 的变量 fileList，就可以在上传组件中使用：

const fileList: Ref<UploadFile[]> = ref([]);

<el-upload
  ...
  :file-list="fileList"
  ...
>
</el-upload>

这里，`Ref<UploadFile[]>` 表示定义一个 `Ref` 类型的变量 fileList，其值为 `UploadFile` 类型的数组。

在上传文件时，在 `before-upload` 钩子函数中，可以限制上传文件的格式和大小。例如：

beforeUpload(file: File) {
  const isJPG = file.type === 'image/jpeg'
  const isPNG = file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG && !isPNG || !isLt2M) {
    this.$message.error('上传文件只能是 JPG/PNG 格式，且不超过 2MB!')
  } else {
    this.uploading = true
    return true
  }
}

这里，判断文件的类型是否为 jpg/png，判断文件的大小是否小于 2MB。如果不满足条件，就会弹出提示，否则开始上传。

在上传成功和上传失败的回调函数中，可以对上传结果进行处理。例如：

handleSuccess(response: UploadSuccessResponse, file: UploadFile) {
  this.uploading = false
  this.fileList.push(file)
  this.$message.success('上传成功')
},
handleError(error: Error, response: UploadFile, file: UploadFile) {
  this.uploading = false
  this.$message.error('上传失败')
}

这里，当上传成功时，将文件添加到已上传的文件列表中，并弹出提示；当上传失败时，弹出提示。

综上所述，实现 Vue3 TS Element-Plus 文件上传的主要步骤包括：引入 Element-Plus 组件库，传入 API地址和前缀，进行类型定义，限制上传文件类型和大小，处理上传结果等。