接上篇
下面的属性就对应着回调函数，下面就一一进行介绍。
因为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。在不同的阶段使用不同的属性，来执行不同的回调，做出相应的操作，完成时机场景中的功能需求。
