element-plus组件之Upload(2.0)

接上篇

下面的属性就对应着回调函数，下面就一一进行介绍。

因为element-plus在封装upload组件时就自带了一个预览和删除的图标，只是没有方法实现，这里进行指明。

 

就是在图片墙列表中，自动就带了这两个图标和遮罩，下面的属性也与其相关

属性

①on-preview

 :on-preview="handlePreview"，通过标签上属性的设置，我们来书写回调函数

  const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
    console.log('我是预览')
    console.log(uploadFile);
    
  }

 这样就可以看到这个回调函数的触发时机，就是我们点击每一个图标的时候触发，然后我们打印默认传递的参数来看看

我们可以看到，默认的参数就是我们点击的图片的详细信息，我们比较常用的就是URL属性，这样，就可以保存这张图片对应的地址信息，以便于本地收集和后续发送给后端。

 ②on-remove

同理，这个就是对应这哪个删除图标的回调调用时机，但是再触发该属性的钩子函数之前，还会触发另一个属性对应的钩子函数，就是:before-remove="beforeRemove"

 const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(
      `Cancel the transfert of ${uploadFile.name} ?`
    ).then(
      () => true,
      () => false
    )
  }

 官网的案例就是用到了element的另一个组件ElmessageBox，消息盒子，对应的链接直接贴出来，就暂时不详细介绍了，毕竟主题是upload组件，MessageBox 消息弹框 | Element Plus

 当我们点击时出现的弹出框

删除后，对应的控制台就会打印我们 on-remove的回调

 

  const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
    console.log(file, uploadFiles)
  }

它拥有两个参数，显而易见，第一个参数就是删除的文件对象，第二个参数就是删除的文件数组，这里如果再做批量删除的业务时，此处就会显示数组中多个被删除的文件对象。

③on-success

④on-error

因为没有后端的服务器，上传成功的钩子打印结果看不出来，类比于失败的效果如下

  const handleError=(error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles)=>{
    console.log('上传失败')
    console.log('error',error)
    console.log('uploadFile',uploadFile)
    console.log('uploadFiles',uploadFiles)
  }

 

⑤on-progress

  const handleProgress=(event: ProgressEvent, uploadFile: UploadFile)=>{
    console.log('上传进度')
    console.log(event)
    console.log(uploadFile)

   }

第一个参数为上传进度对应的事件对象，第二个参数为上传的文件信息

 

⑥on-change

这个属性多用于再用户频繁修改上传的文件，就是在切换上传文件的时候触发

<template>
    <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false"
        :on-change="handleChange">
        <img v-if="props.avatar" :src="uploadAvatar" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
            <Plus />
        </el-icon>
    </el-upload>

</template>

/**
 * 文件变化时的处理函数
 *
 * @param file 文件对象
 * @param fileList 文件列表
 * @returns 无返回值
 */
const handleChange = (file:any, fileList:any) => {
    // 打印文件信息
    // 触发名为 "Mchange" 的事件，并传递文件原始数据作为参数

    emit("Mchange",file.raw)
}

 

⑦on-exceed

该属性经常与limit相互使用，当超过最大上传文件数量时，就会调用该属性的钩子函数

 

⑧before-upload

可以统一类比与上传文件的生命周期，该属性的钩子函数是最先执行的，顺序如下：before-upload-on-progress-成功on-success/失败on-error

   const beforeUpload=( uploadFile: UploadUserFile) => {
    console.log('开始上传')
    console.log(uploadFile)

   }

参数为上传的文件信息

 

⑨before-remove

总结： 这些调用回调函数的属性的执行顺序如下：上传前before-upload--上传过程on-progress--上传成功on-success/上传失败on-error--》后续操作--预览on-preview----切换on-change----删除前before-remove--删除on-remove，最后是一个上传限制on-exceed。在不同的阶段使用不同的属性，来执行不同的回调，做出相应的操作，完成时机场景中的功能需求。