网站建设 ui 企业网站,小程序开发网站设计制作,网站开发软件系统,江苏建设工程信息网准考证打印时间从Element UI 的官方文档中#xff0c; Upload 上传组组件提供了on-remove和before-remove的文件删除的钩子属性#xff08;回调方法名#xff09;#xff0c;但如何调用组件删除方法#xff08;让该方法删除本地上传文件列表以及触发这两个钩子#xff09;并无相关说明。…从Element UI 的官方文档中 Upload 上传组组件提供了on-remove和before-remove的文件删除的钩子属性回调方法名但如何调用组件删除方法让该方法删除本地上传文件列表以及触发这两个钩子并无相关说明。
在不定义file插槽(slot)的情况下通过UI点击控件文件列表上文件的叉标签(X)控件的封装内部会为我们触发相应的before-remove钩子、删除组件列表中对应文件信息、on-remove钩子(一般此处调用后台去删除服务端对应文件)等调用但在我们需要自定义文件列表的模板的情况下我们需要集成文件删除的操作包括保持让before-remove钩子、on-remove钩子也像从默认UI的叉标签X删除的情况那样同样生效而官方文档并没有说明删除操作的API 官方文档中的例子如下下载实现相对简单、删除操作并无具体举例说明 没办法只好分析该组件的源代码
https://unpkg.com/browse/element-ui2.15.13/packages/upload/src/index.vue
https://unpkg.com/browse/element-ui2.15.13/packages/upload/src/upload.vue https://unpkg.com/browse/element-ui2.15.13/packages/upload/src/index.vue 根据源码可知删除操作是通过组件内部的upload子组件(ref为“upload-inner”)调用onRemove回调方法实现的而该子组件的onRemove回调方法实际引用的是上层组件(el-upload本身)的handleRemove方法
因此我们使用el-upload组件可以有以下方法来调用删除文件的操作以触发相应的before-remove钩子、从组件的列表删除对应文件、on-remove钩子 (假设该el-upload组件refupload_attach) $refs.upload_attach.$refs[upload-inner].onRemove(file);$refs.upload_attach.handleRemove(file) el-upload refupload_attach :file-listeditForm.AttachFileInfos drag list-typepicture-card multiple :limitmaxUpload :on-exceedhandleExceed:actionuploadUrl :auto-uploadautoupload *:headersheaders* :datauploadParam :on-changehandleChange1:on-successuploadSuccess1 *:on-previewpreviewPic* :on-removeremoveAttachFile1 :before-removebeforeRemove :class{hideUnload:notAttachUploader}*em classel-icon-plus/em*em classel-icon-upload/emdiv classel-upload__text将文件拖到此处或em点击上传/em/divdiv slotfile slot-scope{file}*img classel-upload-list__item-thumbnail :srcfile.url alt*span{{file.name}}/spanspan classel-upload-list__item-actions*span classel-upload-list__item-previewclickhandlePictureCardPreview(file)i classel-icon-zoom-in/i/span*span classel-upload-list__item-deleteclickhandleDownload(file)i classel-icon-download/i/spanspan classel-upload-list__item-deleteclick$refs.upload_attach.$refs[upload-inner].onRemove(file);*或者click$refs.upload_attach.handleRemove(file);*i classel-icon-delete/i/span/span/div
/el-uploadhandleDownload: function (file) {var link document.createElement(a);link.setAttribute(href, file.url);link.setAttribute(download, file.name);link.setAttribute(target, _blank);link.setAttribute(display, none;);document.body.appendChild(link);link.click();document.body.removeChild(link);
},
运行效果
