接上篇

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

因为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。在不同的阶段使用不同的属性，来执行不同的回调，做出相应的操作，完成时机场景中的功能需求。