element upload 上传文件报错status of undefined

upload 上传报错

场景再现:点击编辑数据,修改上传文件,确定提交修改,关闭弹窗,清空数据和清空附件。

在这里插入图片描述

错误提示:上传报错,下图; Uncaught TypeError: Cannot set property ‘status’ of undefined

控制台错误

报错原因:设置了:file-list=“fileList”,filelist为只读,修改后就会报错 Cannot set property ‘status’ of undefined

解决方法:在成功回调中用setTimeout清空上传列表即可解决。

核心代码

setTimeout(() => {
    this.$refs.upload.clearFiles();
   }, 100);

具体方法代码

this.$refs[forms].validate((valid) => {
          if (valid) {
            EditTrainingRecord(this.form)
              .then((res) => {
                if (res.status == 200) {
                  this.folder.folderId = this.form.accessory;
                  this.submitUpload();
                  this.$message({
                    message: "添加成功",
                    type: "success",
                    center: true,
                    showClose: true,
                  });
                  //清空附件列表
                  setTimeout(() => {
                    this.dialogFormVisible = false;
                    this.$refs.upload.clearFiles();
                  }, 100);

                  this.getList();
                } else {
                  this.$message({
                    message: res.content,
                    type: "warning",
                  });
                }
              })
              .catch((res) => {
                this.dialogVisible = false;
                this.$message({
                  message: "系统异常,请联系管理员",
                  center: true,
                  type: "error",
                });
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: element upload是一个基于Vue.js的文件上传组件,可以方便地实现文件上传功能。用户可以通过该组件选择本地文件并上传到服务器。同时,该组件还支持文件类型限制、文件大小限制、上传进度条等功能,可以满足不同场景下的需求。 ### 回答2: 在现代网页设计中,元素上传(element upload)已成为一个非常常见的功能之一。这项功能允许用户将本地计算机中的文件上传到一个网站或云端服务中,以供其他用户或应用程序使用。 要实现元素上传功能,通常需要编写一段JavaScript代码来创建一个包含文件选择器、上传按钮和上传进度条的HTML元素。然后,在上传按钮被点击时,JavaScript代码会将用户选择的文件上传到一个指定的服务器或云端存储服务中。上传进度条可以随着上传的进度进行更新,以便用户了解文件上传的状态。 在上传文件时,还需要考虑文件类型、大小、上传速度和安全性等因素。为了保证上传的文件安全,通常需要将文件加密或压缩后再上传,以避免文件在传输过程中被不当地拦截或修改。 元素上传功能的应用非常广泛,可以用于各种不同的场景,例如在社交媒体网站上分享照片和视频、在云端文档服务中上传文档、在在线办公软件中上传数据表格等。在未来的互联网发展中,元素上传功能将继续发挥重要作用,为用户和开发者提供更加便利和高效的服务。 ### 回答3: Element upload是一个基于Vue文件上传组件,可以轻松地在你的项目中实现文件上传功能。该组件可以支持多个文件同时上传,支持自定义文件类型过滤、文件大小限制、上传前的文件数量校验和上传进度条等功能。 Usage: 在使用Element upload时,需要在项目中引入该组件并使用它。需要在给定的属性中设置file-list属性来保存上传文件的列表,action属性来指定上传文件的地址。例如,我们可以如下定义一个Element upload的实例: <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList" :auto-upload="false" :before-upload="beforeUpload" :on-progress="onProgress" :on-success="onSuccess" :on-error="onError"> </el-upload> Upload: 在Element upload中,上传文件有两种方法:手动上传和自动上传。默认情况下,Element upload会自动上传文件,但是如果修改auto-upload属性为false,它就会变成手动上传。我们可以通过使用this.$refs.upload.submit()手动触发上传事件,来上传文件。 Validation: Element upload允许我们进行文件上传前的自定义校验。我们可以通过使用before-upload属性,传递一个方法名来验证上传文件的类型、大小等信息。在这个方法中可以做一些自定义的校验逻辑,如果校验通过,返回true,否则返回false。例如: beforeUpload(file) { const isJPG = file.type === 'image/jpeg' const isLt2M = file.size / 1024 / 1024 < 2 if (!isJPG) { this.$message.error('上传图片只能是 JPG 格式!') } if (!isLt2M) { this.$message.error('上传图片大小不能超过 2MB!') } return isJPG && isLt2M } 以上就是Element upload的简介和使用方法,希望这些能够帮助您更好地了解Element upload的使用。如果您在使用Element upload时遇到了问题或者有其他疑问,欢迎在评论区留言。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值