记不住的坑（二）Element UI中upload组件上传docx文件缩略图不显示的问题_elementupload 图片列表缩略图裂开了

   前言：最近写项目的时候碰到了upload上传以及回显的问题，这个项目比较复杂一个破upload组件都拆成三个组件来写，上传回显的时候带着一堆数据三层组件到处跑写起来属实头大。（个人认为套两层不就ok了嘛- -）

图片上传完毕有图片回显，如图。可以显示的原因为他的url就是可以显示的。

反过来我们看docx文件上传完之后，因为docx的url是一个下载地址，所以不支持回显。

  解决方法：既然他url不支持回显，那我们就换一个固定的url进行绑定。首先找个图，把url引入到文件里。利用监听的方法改变docx原始的url。

  1.文件列表是根据file-list文件所绑定值进行显示，所以我们要监听data的值，并且修改data.filelist中的值

  2.我们先来看data的来源，上传完成之后利用upload自带的onchang方法进行push，每次push前会清空。

  3.（感觉可以和第二步合并，push的同时进行修改）利用监听方法，监听data，上传模板的的时候当filelist有东西的时候将其内容进行修改，picUrl是自己定义的图，从外面找来的。

  4.结果图：

总结:写着写着就发现第2步onchange方法监听上传文件的变化时可以直接操作filelist里的url，还用个屁的watch。 感觉就是脱裤子放屁。因为这是个老项目套了好几层写了这几天也是晕头转向所以有的地方也是用的方法比较繁琐，能顺着他的思路写我就懒得改了。主要是解决问题的思路和记录自己踩得坑，如果能帮到大家更好，写的哪里有问题请多担待。

奥对最后还有个问题，我把docx的url改了会不会影响文件的内容，因为上传到后台的二进制流类型，所以会不会有影响我也不知道。。有了解大佬求指点。