最近做了一个项目,需要实现上传文件夹和批量上传文件的功能,发现input标签是可以实现这两个功能的,但是上传文件夹功能还不能兼容全部的浏览器,目前只有谷歌浏览器和Microsoft Edge可以实现上传文件夹的功能,其他浏览器会直接变成上传文件。
实现上传文件夹的功能只需要在input标签中加入webkitdirectory='true'
即可,而multiple='true'
表示可以上传多个文件,注意,这里指定是上传多个文件,目前的文件夹暂时不支持同时上传多个。下面举个例子:
1、上传文件夹
<inputref="input"webkitdirectorytype="file"@change="handleChange"@click="handelClick">
效果图:
2、上传多个文件,需不需要同时上传多个可根据需求设置,这里的例子是可同时上传多个文件
<inputref="input":multiple="true"type="file"@change="handleChange"@click="handelClick">
效果图:
希望上述可以帮助到大家!