松江网站开发培训课程,网站建设中 图片,企业管理培训课程百度云,wordpress关闭手机主题一、前言element ui 已经提供了文件上传的组件#xff0c;直接拿来就能用。具有以下几个特点#xff1a;限制文件上传的个数#xff0c;多个文件会发起多个请求。可以设置文件选择后自动上传或者手动触发上传#xff0c;并且手动触发可以自定义上传逻辑。可以限制文件格式和…一、前言element ui 已经提供了文件上传的组件直接拿来就能用。具有以下几个特点限制文件上传的个数多个文件会发起多个请求。可以设置文件选择后自动上传或者手动触发上传并且手动触发可以自定义上传逻辑。可以限制文件格式和大小比如jpeg等之类的。设置缩略图模板。控制文件列表二、代码及注意事项refuploadaction // 注意点一:multiplefalse:auto-uploadfalse //注意点二:limit2 //注意点三accept.csv //注意点四:on-changehandleChange:before-uploadbeforeUpload:http-requestsubmitFile //注意点五:file-listfileList:on-exceedonExceed //注意点六选取文件只能上传csv文件stylemargin-left: 10px;typesuccessclickselectFile //注意点七提 交关于el-upload 组件提醒以下几点点注意点一 action此属性必填值为上传路径url。注意点二:auto-uploadfalse表明手动触发上传文件的行为当 点击选择文件只是选择文件当点击 提交 按钮时 才会真正的上传。注意点三 :limit2“”限制文件上传个数为2注意点四accept.csv当你选择文件时默认在弹出框中过滤只显示.csv文件当然你可以手动切换过滤的格式仍然可以选择其他文件所以这种方法不能严格保证上传格式符合要求需要在上传的时候再次校验。注意点五:http-requestsubmitFile此属性只有在:auto-uploadfalse 才会生效表示手动触发时将会覆盖默认上传的逻辑同时actionurl也会失效。所以你可以在 submitFile 方法里实现一些业务逻辑。比如根据不同的参数选择不同的url上传。注意点六:on-exceedonExceed超过限制的文件数量时回调的方法可以给出提示。三、问题及经验下面说说我遇到的问题1. 如何实现手动触发文件上传。前面已经说了几个关键点http-requestauto-upload, action如果 :auto-upload“false” 就是手动触发进一步如果 :http-requestsubmitFile 那么提交时将会覆盖默认的上传行为走submitFile方法逻辑。贴下我的代码selectFile() {if (this.fileObj null) {this.$message.error(请选择文件)}this.$refs.upload.submit()console.log(发送文件..)},其中this.$refs.upload.submit() 便会去调用自定义的submitFile方法。 注意哦selectFile是 提交 按钮的事件。那真正的请求逻辑是submitFile此时action“url”也将失效。我采用了表单提交的方式并且不同根据不同的参数调用不同的url。submitFile(item) {this.fileObj item.fileconst formData new FormData()formData.append(file, this.fileObj)if (this.type USER) {importUser(this.$store.state.user.id, formData)}if (this.type ORG) {importOrg(this.$store.state.user.id, formData)}},2. 严格限制上传文件的格式前面说过可以用accept 属性但是不能够严格保证只是在文件选择时候根据文件后缀名进行过滤而已。所以上传之前需要校验在before-upload回调方法里进行逻辑处理beforeUpload(file) {const iscsv file.type application/vnd.ms-excelif (!iscsv) {this.$message.error(只支持csv格式的文件!)}return iscsv},那我怎么知道文件类型是什么可以通过方法里面的file参数知道关于此文件的所有信息。此方法返回false将不会上传并丢弃此文件。3. 只能上传一个文件并且再次选择时候覆盖第一个文件。limit1 可以限制只能上传一个文件当再次选择文件时将会触发 on-exceed 回调方法(如果你绑定了此方法)然后就结束后续操作了。不能满足需求。实现方案1在on-exceed方法里提示用户让用户先删除原来的文件列表然后就可以再次上传新文件了。onExceed(file, fileList) {this.$message.error(只能上传一个文件请先删除已有文件!)},第一个file参数是当前选中的文件第二个参数fileList为已经选中的文件列表。实现方案二在用户选择时默认删除第一个文件这样无论上传多少个文件都只会保留最后一次选择的文件。关键点绑定handle-change 事件将fileList中的第一个文件删除。代码如下handleChange(file, fileList) {if (fileList.length 1) {this.$refs.upload.handleRemove(fileList[0])}console.log(fileList)},当采用这种方案时页面上会有出现文件删除和增加的动画效果个人觉得不是很好因此需要除去此效果网上找寻一波以下方法经受住了我的考验和大家分享下/deep/ .el-list-enter-active,/deep/ .el-list-leave-active {transition: none;}/deep/ .el-list-enter,/deep/ .el-list-leave-active {opacity: 0;}以上便是在使用el-upload组件上传时的使用方法和心得建议一定要好好阅读官方文档的实例基本都能满足我们的需求。写的不详细的地方一定要去看官网哦文档都写了睁大眼睛传送带 https://element.eleme.cn/#/zh-CN/component/upload
