el-upload 上传

<template>
  <div class="ai-wrapper" id="ai-wrapper">
    <el-input v-model="filenames" style="width: 240px" placeholder="请输入上传图片的名称" size="small" />
    <el-upload
      v-model:file-list="fileList"
      class="upload-demo"
      :action="'服务器地址'"
      multiple
      :before-upload="handleUpdate"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :limit="3"
      :on-exceed="handleExceed"
      :on-success="handleSuccess"
    >
      <el-button type="primary">请上传图片</el-button>
      <template #tip>
        <div class="el-upload__tip"></div>
      </template>
    </el-upload>
  </div>
</template>

script setup lang="ts">
import type { UploadProps, UploadUserFile } from 'element-plus'
const fileList = ref<UploadUserFile[]>()
// 上传文件之前的钩子
const handleUpdate = (file: any) => {
  /**
   * lastIndexOf
   * 查某个指定的字符串在字符串首次出现的位置
   */
  const index = file.name.lastIndexOf('.')
  /**
   * substring
   * 字符串截取
   * start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
   * stop  可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。
   */

  /**
   * toLocaleLowerCase
   * 把字符串转换为小写
   */
  let type = file.name.substring(index + 1).toLocaleLowerCase()
  const hasType = ['jpg', 'png', 'gif'].some(res => {
    return type === res
  })

  let filename = file.name.substring(0, file.name.lastIndexOf('.'))
  console.log(filename)
  filenames.value = filename
  if (!hasType) {
    ElMessage.warning('文件类型不正确')
    return false
  }
}
// 文件上传成功
const handleSuccess = (data: any) => {
  console.log('data', data.data)
}
</script>