vue3+ts+elementui中的手动上传至服务器

<el-upload class="inline" ref="uploadImgRef" :http-request="uploadImg" :auto-upload="false" :accept="'.jpg,.png'">
 　　<template #trigger>
 　　　　<el-button type="primary" plain>
            选择图片
 　　　　</el-button>
 　　</template>
</el-upload>
<el-button type="primary" @click="enableClick(formRef)">启用</el-button>

http-request : 覆盖默认的 Xhr 行为，允许自行实现上传文件的请求

type中写法:

export interface IPromisdata<T> {
  code?: number;
  msg?: string
  data: T
}
// 标准图片上传
export interface IAddPictureRes {
  　imgId: string
}
export type ResponsePostureData<T> = Promise<IPromisdata<T>>

api写法:

//引用type
export const addPicture = (data: { file: File }): ResponsePostureData<IAddPictureRes> => {
  const fd = new FormData()
  fd.append('file', data.file)
  return request({
    url: '/img/v1/add',
    method: 'POST',
    data: fd
  })
}

script写法:

import type { UploadInstance } from 'element-plus'
const uploadImgRef = ref<UploadInstance>()
// 上传图片请求
const uploadImg = async ({ file }: { file: File }) => {
  const res = await addPicture({ file })
  if (res.code === 200) {
    ElMessage.success('图片上传成功')
  } else {
    ElMessage.error(res.msg)
  }
}
// 启用
const enableClick = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {// 图片上传 上传到服务器
      uploadImgRef.value!.submit()
    } else {
      return false
    }
  })
}

外部方法 : submit　　手动上传文件列表

作者：CoderWGB
欢迎任何形式的转载，但请务必注明出处。
限于本人水平，如果文章和代码有表述不当之处，还请不吝赐教。