使用element上传图片与视频

1.最近产品来了一个需求，在原有上传图片的基础上和也可以上传视频一起。

O(∩_∩)O哈哈~对于我这个前端小白来说 直接去element的upload官网看 https://element.eleme.io/#/zh-CN/component/upload

2.element的upload是可以上传文件的，只要不限定上传的文件类型都可以成功。但是

上传视频后渲染是不成功的，因为生成了img标签，所以上传图片是可以渲染的

图片是ok的！

3.这时候我就有个想法了，这个组件有没有上传时候可以把图片和视频分开渲染不就可以啦

小伙伴们可以点击在线运行上传的时候加个判断如果是图片类型就是img标签；如果是视频类型就是video标签 我测试下可以的。但是提前 后台需要给你个上传的action 可以返回上传视频的url

4.虽然这个方法可行，但是本身这个项目写的有点早，版本更不上。。。取巧的方法没有了。

差别好几个版本

5.绞尽脑汁 还是得操作原生dom，最终效果如下

图片视频可以预览，上传接下来上代码

6.这个是完整的上传图片视频的代码内容

更多的相关参数可以去element的官网查看

7.  ref vue基本用法，获取当前dom元素，对于想操作dom的同学 这个比较给力！

     on-success 文件上传成功时的钩子  对应的方法 function(response, file, fileList)

     on-preview  点击文件列表中已上传的文件时的钩子 对应的方法 function(file)

     on-remove  文件列表移除文件时的钩子 对应的方法 function(file, fileList)

     before-upload 上传文件之前的钩子，参数为上传的文件  function(file)

     file-list 储存的上传文件列表 数组形式

     data 请求接口传给后台的参数 对象的形式

     list-type 有3种展示样式 picture-card 为当前展示的样式

8.接下来就是一个完整的上传步骤

上传前的判断（视频要在移动端预览，安卓的视频兼容不好，我这边写死只能是mp4格式）

如果是图片上传的时候直接插入最后一个dom

预览功能

删除功能

9. 这就实现了上传图片视频一起，虽然上传过程很艰难，但是功能是可以实现的。

后记：视频与图片上传成功后，我们关掉页面后，在进去页面，是要重新渲染的。这时候 也要操作dom 获取到当前ref下的全部li列表 在通过遍历 把是视频的链接换成video标签

this.campusData.images  为请求后来图片视频链接集合

10.这样就OK了！