cube-ui 弹窗组件的用法_elementui的<elupload>组件实现文件上传,请注意！！

用element-ui 的 >组件实现文件上传，出现以下错误

原因很简单，由于这个表单是在一个弹框里面的,所有当弹框关闭时/的所有组件都不能再次引用，比如说file,file-list属性时，就会出现undefined错误 ,所以在使用弹窗的时候一定要注意异步操作时先所有操作完毕才可以关闭弹框

什么是异步操作？

同步指的是一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。

异步指的是每一个任务有一个或多个回调函数(callback)，前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

常见的异步

1，点击时间，

2，定时器，

3，AJAX请求，

常见的操作方法

1，回调函数，这是异步编程最基本的方法。

2，事件监听

3，发布/订阅

4，Promises对象

简单总结一下了关于异步的知识点，以后的文章可以详细介绍异步以及这四种关于异步的操作方法。接下来主要讲element-ui 的 >组件实现文件上传出行的报错。原因上面已经告诉大家，具体怎么解决呢，先上图。

这里是一个el-upload组件

当我选择上传文件点击确定自定义提交时，出现了报错，

Uncaught TypeError: Cannot set property 'status' of undefined

点击确认之后，我们上传文件时，关闭了弹窗组件，清空了文件列表。由于这个表单是在一个弹框里面的,所有当弹框关闭时的所有组件都不能再次引用，所以出现了以上报错。

解决办法：

通过promise基本用法进行异步操作，就可以解决这个问题了。

Promise的基本用法：// resolve代表成功 reject失败 都是一个函数let p = new Promise(function(reslove,reject){    //reslove('成功')  //状态由等待变为成功，传的参数作为then函数中成功函数的实参    reject('失败')  //状态由等待变为失败，传的参数作为then函数中失败函数的实参})//then中有2个参数，第一个参数是状态变为成功后应该执行的回调函数，第二个参数是状态变为失败后应该执行的回调函数。p.then((data)=>{    console.log('成功'+data)},(err)=>{    console.log('失败'+err)})

根据上面所写promise的基本用法来就解决我们的问题。

注意：this指向问题。

今天就给大家分享这么多，如果有小伙伴有更好的方法，或者小编哪里有问题欢迎大家指出，公众号回复。

做最专业最懂你的前端开发平台，提供你最需要的开发学习资源。我们专注于前端开发技术的学习与交流，我们坚持，每天进步一小步，人生进步一大步！关注趣玩前端，与我们一起学习进步。