vue2.0 的el-upload的点击预览事件

在Vue 2.0中，el-upload组件是用于实现文件上传功能的，其中的点击预览事件可以通过以下方式来实现。首先，我们需要先在Vue的data中定义一个变量，用来保存用户选择的文件列表：

data() {
  return {
    fileList: []
  }
},

接着，在el-upload组件上添加一个点击事件的监听器，可以通过@click属性来实现：

<el-upload
  :file-list="fileList"
  @click-preview="handleClickPreview"
>
  <!-- 其他上传相关的配置项 -->
</el-upload>

然后，在Vue的methods中定义一个处理点击预览事件的方法：

methods: {
  handleClickPreview(file) {
    // 在这里可以根据具体的需求来实现预览功能
    // 可以通过file变量来获取被点击的文件的信息
    // 例如，可以使用HTML5的FileReader对象来实现图片的预览功能
    const reader = new FileReader()
    reader.onload = (e) => {
      // 将预览的结果赋值到某个变量，然后在页面上展示
      this.previewImage = e.target.result
      // 在这里可以显示一个模态框或者其他UI组件来展示预览结果
    }
    reader.readAsDataURL(file.raw)
  }
}

如上所示，我们通过监听@click-preview事件来处理点击预览的逻辑。在该事件的处理方法中，可以通过传入的file参数获取到被点击的文件对象，并且可以使用FileReader对象来读取文件内容并进行相应的处理，例如，我们可以将图片文件用Data URL的形式进行预览。注意，具体的预览逻辑可以根据项目需求进行定制。