文件上传
文件上传的优化主要是从按钮的样式和操作逻辑入手的。
需求是这样的：
input框 当type="file" 它的文案及弹框样式都无法修改，
再查阅百家资料，高人相助后，用这个方法解决了这个问题。
其实网上也有很多，只是当时在vue文件中怎么去尝试这个，没有思路......
解决方法如下：
额外设置两个的按钮，分别触发文件上传和文件夹上传事件，并把input文件上传按钮不显示在页面中
HTML部分：
1 <div class="menu"> 2 <span class="menu-title" @click="downFile(1)">上传文件</span> 3 <input v-show="false" id="uploadfile" style="display:block" type="file" name="files[]" ref="sdx1" multiple @change="getfile($event)" /> 13 </div> 14 <div class="menu"> 16 <span class="menu-title" @click="downFile(2)">上传文件夹</span> 17 <input v-show="false" id="uploadfiles" style="display:block" type="file" name="files[]" webkitdirectory ref="sdx2" multiple @change="getfile($event)"/> 28 </div>
JS部分：
1 downFile(type) { 2 if (type == "1") { 3 this.$refs["sdx1"].click(); 4 } else { 5 this.$refs["sdx2"].click(); 6 } 7 },
这种写法，本质上是在中间函数运用了ref以获取文档元素，并调用其click事件，笔者当初这种方法忽略的原因主要是两点：
1、ref知识点不够敏感
2、认为文本框的change事件是不可触发的事件，岂料，调用click元素就可以，真是啼笑皆非。
不过也算小小收获，便记录下，与诸君分享。