vue3 elemente-plus Upload 上传

    <el-upload v-model:file-list="fileList" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
      <el-icon>
        <Plus />
      </el-icon>
    </el-upload>

    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>


import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

import UploadFile from 'element-plus'
import { UploadProps, UploadUserFile } from 'element-plus'

const fileList = ref([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}

新版的

 <el-upload v-model:file-list="fileList" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      width="1000px" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
      :on-success="success" :auto-upload="false">
      <!-- <template #file="{ file }" >
        <div>
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <video class="el-upload-list__item-thumbnail" :src="file.url" alt="">
          </video>
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
              <el-icon><zoom-in /></el-icon>
            </span>
            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
              <el-icon>
                <Download />
              </el-icon>
            </span>
            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
              <el-icon>
                <Delete />
              </el-icon>
            </span>
          </span>
        </div>
      </template> -->
    </el-upload>
    <!-- <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
     <video :src="dialogImageUrl"></video>
    </el-dialog> -->
    <el-image-viewer v-if="dialogVisible" :url-list="[dialogImageUrl]" :initial-index="initialIndex" @close="close" />

// const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
const initialIndex = ref("")
const dialogImageUrl = ref([])

const handleRemove = (UploadFile) => {
  let index = fileList.value.findIndex(item => item.uid === UploadFile.uid)
  console.log(UploadFile, fileList.value, index)
  // fileList.value.splice(index, 1)
}

const handlePictureCardPreview = (UploadFile) => {
  let index = fileList.value.findIndex(item => item.uid === UploadFile.uid)
  initialIndex.value = index
  let list = []
  fileList.value.forEach(item => {
    list.push(item.url)
  })
  dialogImageUrl.value = list

  // dialogImageUrl.value = UploadFile.url
  dialogVisible.value = true
}

const handleDownload = (UploadFile) => {
  console.log(UploadFile)
}
const success = (e) => {
  console.log('上传成功', e)
}
const close = (e) => {
  console.log('关闭', e)
  dialogVisible.value = false
}