MENU前言Element-Ui写法input写法前言1、以下代码只实现的单个文件夹的上传原本需求是实现选择多个文件夹上传但是没找到实现的方法。如果想实现多个文件夹上传可以给这些文件夹新建一个父级文件夹点击上传的时候选择父级文件夹就能遍历该父级文件夹下的所有子集文件夹这样就能实现多个文件夹上传了。2、其他文章链接文章内容并没有去实践有兴趣的伙伴可以看看。Element-Ui写法Htmlel-uploadclassupload-demoaction#:on-removefileRemove:on-changefileChangaccept:auto-uploadfalse:multipletrue:file-listform.instFilePicsrefuploadFileel-buttonsizesmalltypeprimaryiclassel-icon-folder-opened/i/el-button/el-uploadJavaScripdata(){return{form:{instFilePics:[],instFile:[]},}},mounted(){// 以下代码有时候可能写法不同// 可在控制台打印一层一层的找input// 再加webkitdirectory属性this.$refs.uploadFile.$children[0].$refs.input.webkitdirectorytrue;},methods{fileChang(file,fileList,name){this.form.instFilePicsfileList;},fileRemove(file,fileList,name){this.form.instFilePicsfileList},}解析html01、el-upload是一个Element UI的上传组件用于上传文件。02、classupload-demo为上传组件添加一个CSS类用于样式定制。03、action#指定上传的服务器地址这里设置为#表示不进行实际的上传操作。04、:on-removefileRemove监听文件被移除的事件当文件被移除时调用fileRemove方法。05、:on-changefileChang监听文件变化的事件当文件发生变化时调用fileChang方法。06、accept指定可以上传的文件类型这里为空表示不限制文件类型。07、:auto-uploadfalse设置为false表示上传操作不会自动进行需要手动触发。08、:multipletrue设置为true表示支持多文件上传。09、:file-listform.instFilePics绑定一个文件列表这个列表将显示在上传组件中。10、refuploadFile为上传组件设置一个引用可以在Vue实例中通过this.$refs.uploadFile访问到这个组件。JavaScrip1、data()定义组件的数据其中form对象包含两个数组instFilePics用于存储上传的文件列表instFile可能用于其他文件上传的数组。2、mounted()在组件挂载到DOM后执行通过this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory true;设置文件输入框支持选择文件夹。3、methods定义两个方法fileChang和fileRemove。3.1、fileChang(file, fileList, name)当文件列表发生变化时更新form.instFilePics为最新的文件列表。3.2、fileRemove(file, fileList, name)当文件被移除时更新form.instFilePics为最新的文件列表。总结代码段实现一个文件上传组件用户可以选择文件或文件夹进行上传上传的文件列表会显示在界面上。通过fileChang和fileRemove方法可以处理文件列表的变化和文件的移除操作。input写法Htmldivclassselect-files-btnel-buttontypeprimaryclickchoiceFilesiclassel-icon-folder-opened/i/el-buttoninputreffilElemtypefilemultipleclassupload-filewebkitdirectorychangegetFile//divJavaScripmethods:{choiceFiles(){// 以下代码有时候写法不同// 可在控制台打印一层一层的找inputthis.$refs.filElem.click();},getFile(e){letfilese.target.files;console.log(files);}}解析html1、div classselect-files-btn是一个包含按钮和文件输入框的容器。2、el-button typeprimary clickchoiceFiles是一个Element UI的按钮组件类型为primary表示按钮是主要操作按钮。clickchoiceFiles是一个事件监听器当按钮被点击时会调用Vue实例中的choiceFiles方法。3、i classel-icon-folder-opened/i是一个图标使用Element UI的图标类显示一个打开的文件夹图标。4、input reffilElem typefile multiple classupload-file webkitdirectory changegetFile/是一个文件输入框允许用户选择多个文件(multiple属性)。reffilElem是一个Vue的引用允许在Vue实例中直接访问这个DOM元素。webkitdirectory属性允许用户选择文件夹而不是单个文件。changegetFile是一个事件监听器当文件选择框的值发生变化时会调用Vue实例中的getFile方法。JavaScrip1、choiceFiles()方法会在用户点击按钮时被调用。它通过this.$refs.filElem.click()模拟点击文件输入框允许用户选择文件而不直接点击输入框。2、getFile(e)方法会在文件输入框的值发生变化时被调用(即用户选择了文件后)。e.target.files包含用户选择的所有文件然后这些文件会被打印到控制台。总结代码段提供一个用户界面允许用户通过点击一个按钮来选择文件或文件夹并在选择后将文件信息打印到控制台。这通常用于文件上传功能。