element-ui上传组件，before-upload发送异步请求 + Promise小总结

1、最终代码

上传组件html:

 <el-upload
            --snip--
            :before-upload="handleBeforeUpload"
            --snip--
  </el-upload>

对应的JS代码：

methods:{
	handleBeforeUpload(file){
    /*checkFileIsInDb是一个axios请求*/
    return checkFileIsInDb(file.name).then(resp=>{
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
            this.$message.error('文件大小超过 2MB')
        }
        let isAccept = new RegExp('.php$').test(file.name)
        if (!isAccept) {
            this.$message.error('应该选择php类型的文件')
        }
        let isSame = true;
        this.uploadFiles.forEach(value => {
            if(value.name === file.name){
                this.$message.error('不要同时上传相同文件名的文件')
                isSame = false
            }
        })
        let isCanStore = resp.data.state
        if(!isCanStore){
            this.$message.error('后端已经有相应检测记录，请删除检测记录或者修改文件名后重新上传')
        }
        if(isRightSize && isAccept && isSame && isCanStore){
            return 1
        }
        else {
            return Promise.reject(1)// return new Promise((resolve,reject)=>reject(1))
        }
    })
    }
}

代码分析：

该函数返回的是一个Promise对象（checkFileIsInDb(file.name).then(resp=>{...})）,如果该Promise对象的状态为fulfilled，那么允许上传；如果该Promise对象的状态为rejected，那么取消上传。

2、之前的尝试代码（使用async关键字）

methods:{
    async handleBeforeUpload(file){
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        let isAccept = new RegExp('.php$').test(file.name)
        if (!isAccept) {
          this.$message.error('应该选择php类型的文件')
        }
        let isSame = true;
        this.uploadFiles.forEach(value => {
          if(value.name === file.name){
            this.$message.error('不要同时上传相同文件名的文件')
            isSame = false
          }
        })
        /*await: 异步代码同步化*/
        let res = await checkFileIsInDb(file.name)
        console.log("res in async", res)
        let canBeStore = res.data.state
        if(!canBeStore){
          this.$message.error('后端已经有相应检测记录，请删除检测记录或者修改文件名后重新上传')
        }
        console.log("canBeStore：", canBeStore)
        return isRightSize && isAccept && isSame && canBeStore
      },
}

但是发现，使用了async关键字后，直接返回false，也显示的是上传成功:

methods:{
    async handleBeforeUpload(file){
        return false;
      },
}

原因解析如下：

参考：element-ui上传组件，before-upload里面如何使用异步

• async的原理就是返回promise了，如果结果是true和false,转换成promise后，promise的状态为fulfilled，结果为false而已。那么仍然得到的是Promise.resolve方法一样。所以这时候即便为false。仍然可以执行上传操作。

3、如何控制一个Promise对象的状态？

通过返回Promise.resolve()来得到一个状态指定为fulfilled的Promise对象；
通过返回Promise.rejected()得到一个状态指定为rejected的Promise对象。Promise.resolve('foo')的本质是new Promise(resolve => resolve('foo'))，new Promise(function(resolve, reject){...})中的function(resolve, reject){...}决定了该Promise对象的状态。如果不使用resolve参数、不使用reject参数，那么该Promise对象的状态就是pending

举例：

var a = new Promise((resolve, reject)=>{}) //a的状态为pending
var b = new Promise((resolve, reject)=>{return 1}) //b的状态为pending
var c = new Promise((resolve, reject)=>{resolve(1)}) //c的状态为fulfilled
var d = new Promise((resolve, reject)=>{reject(1)}) //d的状态为rejected, 报错Uncaught (in promise)
var e =  new Promise((resolve, reject)=>{return Promise.resolve(1)}) //e的状态为pending
var f =  new Promise((resolve, reject)=>{return Promise.reject(1)}) //f的状态为pending

第一个Promise的对象由var firstPromiseObj = new Promise(function(resolve, reject){...})的形参resolve和reject来决定它的状态。如果不使用这2个参数，那么该Promise对象的状态就为pending。状态为pending的Promise对象的.then(resolvedContent=>{...}, rejectedContent=>{...})方法，接收不到内容。

之后的Promise对象，比如由该对象.then()产生的第二个Promise对象(var secondPromiseObj = firstPromise.then(resolvedContent=>{...}, rejectedContent=>{...}))的状态指定为fulfilled/rejected需要{...}中返回一个Promise对象。如果没有return关键字，那么返回的是fulfilled的Promise对象(secondPromiseObj的状态为fulfilled:undefined)；如果返回普通值，那么就相当于返回Promise.resolve(普通值)，secondPromiseObj的状态为fulfilled。如果返回Promise.reject()，那么secondPromiseObj的状态就为rejected。如果返回new Promise((resolve,reject)=>{})，那么secondPromiseObj的状态就为peding；如果firstPromiseObj的状态一直为pending，那么secondPromiseObj的状态也会一直为pending。

一句话总结：

promiseObj.then()中.then()的作用是：监听promiseObj这个Promise对象状态的改变（pending->fulfilled / pending->rejected），执行相应的回调函数，并返回一个新的Promise对象。

4、参考文章

1、element-ui上传组件，before-upload里面如何使用异步

2、Promise 对象