vue3中el-uplod结合ts实现图片粘贴上传

<el-form :model="dialogForm" label-width="100px" :rules="rules" ref="dialogFormRef" @paste="_handlePaste">
    <el-form-item label="上传图片" prop="imageList">
        <el-upload
          ref="uploadRef"
          multiple
          name="files"
          v-model:file-list="pictureList"
          :action="uploadAction"
          :headers="uploadHeader"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-success="handlePictureSuccess"
          :on-remove="handleRemove"
        >           
          <div class="picture-upload">
            <el-icon><Plus /></el-icon>
            <span>上传图片</span>
          </div>
         </el-upload>
        <el-dialog v-model="dialogVisible" class="image-preview">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
    </el-form-item>
</el-form>

import { ref, getCurrentInstance } from 'vue'
import type { UploadProps, UploadUserFile, FormRules, FormInstance, ElUpload } from 'element-plus'
import { getCookieToken } from '@/utils/util'//获取token方法
import axios from 'axios'
const instance = getCurrentInstance() as any
const uploadAction = ref(`接口地址`)
const uploadHeader = ref({
  token: getCookieToken('token')
})
const dialogForm = ref({  
  imageList: [], // 图片列表
})
const pictureList = ref<UploadUserFile[]>([])// 图片列表
const rules = reactive<FormRules>({  
  imageList: [{ required: true, message: '请上传', trigger: ['blur', 'change'] }]
})
const dialogFormRef = ref<FormInstance>()
const uploadRef = ref<InstanceType<typeof ElUpload>>()
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
// 图片删除
const handleRemove: UploadProps['onRemove'] = () => {
}
// 图片预览
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
// 上传成功
const handlePictureSuccess:UploadProps['onSuccess'] = (e, f) => {
}
// 获取图片参数列表--v-model:file-list="pictureList" ,可获取想要的图片参数
const _getPictureList = () => {
  const tempImgList = ref([]as any)
  if (pictureList.value.length) {
    pictureList.value.forEach((element:any) => {
      if (element.response) {
        tempImgList.value.push(element?.response?.data[0].url)
      } else {
        tempImgList.value.push(element.url)
      }
    })
    dialogForm.value.imageList = tempImgList.value
  }
}
//监听粘贴操作
const _handlePaste = (e:any) => {
  let clipboardData = e.clipboardData
  if (!clipboardData) {
  // chrome
    clipboardData = e.originalEvent.clipboardData
  }
  const items = ref(''as any)
  items.value = (e.clipboardData || (window as any).clipboardData).items
  const file = ref(null as any)
  if (!items.value || items.value.length === 0) {
    ElMessage.error('当前浏览器不支持粘贴本地图片，请打开图片复制后再粘贴！')
    return
  }
  for (let i = 0; i < items.value.length; i++) {
    // 限制上传文件类型
    if (items.value[i].type.indexOf('image') !== -1) {
      file.value = items.value[i].getAsFile()
      break
    }
  }
  if (file.value) {
    const fileData = reactive({
      file: ''as any
    })
    fileData.file = file.value
    _uploadfile(fileData)//调用上传接口
  }
}
//调用上传接口
const _uploadfile = (fileObj:any) => {
  const formData = new FormData()
  formData.set('files', fileObj.file)
  // 这里使用封装的上传文件的接口
  axios.post('接口地址', formData, {
    headers: {
      token: getCookieToken('token')//获取请求头
    }
  }).then(res => {
    pictureList.value.push(res.data.data[0])
    instance.proxy.$forceUpdate()//强制更新
  }).catch((e) => {
    console.log(e, '报错')
  })
}