<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) => {
}
// 獲取圖片參數(shù)列表--v-model:file-list="pictureList" ,可獲取想要的圖片參數(shù)
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
  }
}
//監(jiān)聽粘貼操作
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)//調(diào)用上傳接口
  }
}
//調(diào)用上傳接口
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, '報錯')
  })
}