Element-Plus上传文件组件upload之图片上传

最近写的一个移动端项目有一个上传图片的功能，我自己写了一个（很繁琐），然后最近在小程序上复刻这个项目，使用uview中得一个组件给了我点灵感，在element-plus中找到了类似得组件，不过用起来稍微麻烦，话不多说，上代码

需求：可以上传一张或多张图片、点击图片可以放大查看、可以删除

实现过程如下

<!-- 图片的上传、预览、删除、 -->
  <el-upload
    v-model:file-list="fileList"
    action="/hgkcManage/common/upload"
    :headers="{ Authorization: token }"
    method="post"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-success="clickUpload"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>

  <el-dialog
    v-model="dialogVisible"
    style="width: 100vw"
  >
    <img
      style="width: 100%"
      :src="dialogImageUrl"
      alt="Preview Image"
    />
  </el-dialog>

// ==================
const fileList = ref([])
const fileNameArr = ref([])
let fileNameArrStr = ref('')
const token = localStorage.getItem('token')
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
import type { UploadProps, UploadUserFile } from 'element-plus'
// 上传图片
const clickUpload: UploadProps['onSuccess'] = (uploadFile) => {
  console.log(uploadFile)
  fileNameArr.value.push(uploadFile.fileName)
  console.log(fileNameArr.value)
}
// 删除图片
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  fileNameArr.value = uploadFiles.map((item) => {
    return item.response.fileName
  })
  console.log(fileNameArr.value)
}
// 点击放大图片
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
// ==================

这个组件本身是可以开箱即用的，但是对于跟差不多水平得小白来说可能不太清楚怎么用，重点是要会使用组件提供的钩子函数，我上面使用了onPreview、onRemove、onSuccess这三个钩子，然后就是实际开发中设置得请求头、请求方法、请求地址在这个组件中是直接写在组件里，其他方面大家一看就知道怎么用了！

最终效果

该组件地址

Upload 上传 | Element Plus