文件上传优化

文件上传

文件上传的优化主要是从按钮的样式和操作逻辑入手的。

需求是这样的：

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元素就可以，真是啼笑皆非。

不过也算小小收获，便记录下，与诸君分享。

未完，待续......