Ant Design Pro 2项目upload视频上传弹窗预览

基础环境

我在前面的文章中写明了当前具体环境版本，可以参考
Ant Design Pro 2(动态路由和菜单)

upload这个官方组件存在的问题

第一次看这个组件觉得效果很不错，结果一用才发现，开发体验极差，官方文档也是举例试，完全需要开发人员自己拓展，说好的组件化呢，还需要代工的组件化我还要你干嘛，对比下就项目用到的组件bootstrap fileinput，心累，因为框架迭代就是要有人去肝....
算了，不吐槽，处理现有的问题：
官方提供的案例中有图片弹窗预览效果，但是上传视频等非图片文件后，无法点击预览按钮，事件也是无法触发，这，我编辑查看详情页面时要怎么展示？？

修改思路

细心观察的前端兄弟通过审查元素可以看到预览按钮灰色实际上是可以通过样式修改，达到可以跟图片一样预览效果，并且可以触发点击事件preview的，我们要做的就是在change选择事件中延迟下悄悄把样式改了，同时modal中判断如果是视频类型就展示video标签，然后弹窗关闭事件中判断下把视频关闭就可以了

组件页面代码

src/components/UploadFile/AntdUploadImg.vue
这个组件是结合了其他网友分享的文档进行改造而成，暂时满足了我们当前项目的业务需求，可以根据实际情况进行拓展

新增页面调用

标签

注入声明,初始化变量
videoParameter变量是我放上传时的一些额外参数，我这边上传走的是独立的接口，所以要先走业务表新增，返回标识，才会继续走上传接口

import AntdUploadImg from '@/components/UploadFile/AntdUploadImg'
components: {
    AntdUploadImg
  },
  data () {
    return {
    videoParameter: {
        product_id: this.bar_id,
        file_type_id: 64,
        tables: 6,
        table_name: 'b_bar'
      }
    }
}

调用上传接口,customRequest是组件暴露出来触发上传的方法

this.$refs.videoUploadRef.customRequest(this.videoParameter)

编辑页面调用

编辑页面跟新增页面差不多，因为走的是独立上传接口，只要根据暴露的组件方法去初始化fileList就可以了

this.videoFileList.push({
                uid: item.files_middle_id,
                name: item.photos.name,
                status: 'done',
                url: item.photos.url
              })
this.$refs.videoUploadRef.customSetFileList(this.videoFileList)

至于文件删除的话，因为我们走的都是独立附件处理接口，所以就直接放在组件中了，如果需要触发删除事件，可以自己写$emit

remove (file) {
      // console.log(file)
      // 删除文件
      const index = this.fileList.indexOf(file)
      this.fileList.splice(index, 1)
      if (file.url) {
        return uploadDelete(file.uid)
          .then(res => {
            this.$message.success('操作成功')
          })
      }
    }

视频图片相关效果图

初始化页面

选择视频后缩略图

鼠标移动过去后

点击预览效果

最后总结

作为一个伪全栈搬砖人员，最讨厌的就改造了（因为啥都只懂一点......），之前的框架上传用的组件是bootstrap-fileinput，用习惯了，而a-upload提供出来的方法和案例又少，改起来真的很烦，a-upload给我的感觉就是太过轻量级了，用轮子来说就是样子货，下个项目必须要去整理下vue+bootstrap-fileinput，如果大家有已经成熟的antdv+bootstrap-fileinput的案例也可以分享给我，开开心心开发敲代码他不香么。