文件上传优化

文件上传

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

需求是这样的：

     input框  当type="file" 它的文案及弹框样式都无法修改，

     再查阅百家资料，高人相助后，用这个方法解决了这个问题。

     其实网上也有很多，只是当时在vue文件中怎么去尝试这个，没有思路......

 

解决方法如下：

    额外设置两个的按钮，分别触发文件上传和文件夹上传事件，并把input文件上传按钮不显示在页面中

    HTML部分：

 <div class="menu">
    <span class="menu-title" @click="downFile(1)">上传文件</span>
    <input v-show="false" id="uploadfile" style="display:block" type="file" name="files[]" ref="sdx1" multiple @change="getfile($event)" />
 </div>
 <div class="menu">
    <span class="menu-title" @click="downFile(2)">上传文件夹</span>
    <input v-show="false" id="uploadfiles" style="display:block" type="file" name="files[]" webkitdirectory ref="sdx2" multiple @change="getfile($event)"/>
 </div>

 

     JS部分：

  downFile(type) {
      if (type == "1") {
        this.$refs["sdx1"].click();
      } else {
        this.$refs["sdx2"].click();
     }
  },

 

   这种写法，本质上是在中间函数运用了ref以获取文档元素，并调用其click事件，笔者当初这种方法忽略的原因主要是两点：

   1、ref知识点不够敏感

   2、认为文本框的change事件是不可触发的事件，岂料，调用click元素就可以，真是啼笑皆非。

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