文件上传优化
文件上传
文件上传的优化主要是从按钮的样式和操作逻辑入手的。
需求是这样的:
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元素就可以,真是啼笑皆非。
不过也算小小收获,便记录下,与诸君分享。
未完,待续......