做了一个项目，要求保存一个封面图和pdf文件和一些字段信息。前端上传的控件是elementui封装的。

                                class="upload-demo"
                                ref="upload"
                                :file-list="coverPic"
                                :on-change="handleChangePic"
                                action="/pc/dataCenterNew/nopaper/uploadReport"
                                :show-file-list="true"
                                :on-success="handleSuccessPic"
                                :on-error="onErrorPic"
                                :auto-upload="false"
                                list-type="picture"
                                :on-preview="handlePreviewPic"
                                :on-remove="handleRemovePic"
                                :data="{uuid:uuidPic}">

action是后端的接口地址 ，on-change是文件改变的时候钩子函数 ，on-success是上传成功钩子函数 ， on-error是上传失败的钩子函数 ， auto-upload这个比较重要是是否自动上传 如果不设置这个参数则是自动上传 当选择文件的时候就会上传。data是上传中带的除了文件以外的参数 此处我带的是文件重命名的名字。用uuid防止文件重复。

由于是两个上传控件，只有两个文件都上传成功之后才调用最终的保存接口，那么问题就是如何保证两个上传文件都上传结束后才调用最终保存接口。一开始我想的是封面图的大小应该是小于文件的所以文件上传比图片慢 我在上传文件成功的钩子函数中调用。但是在测试过程中发现并非图片一定小于文件。

所以我利用两个变量来标识两个上传结束。在上传结束的钩子函数中给变量复制为true。
并监听这两个变量的值，当这两个变量的值都为true时调用最终的上传接口。

computed:{
            time(){
                let value1 = this.pictureUploadFlag;
                let value2 = this.fileUploadFlag;
                return{value1,value2};
            }
        },

首先在computed中将想要监听的两个变量合并成一个变量。
因为computed中的变量在页面的属性发生变化的时候会进行重新计算，所以当this.pictureUploadFlag和this.fileUploadFlag的值发生变化时time的值会重新计算。这个时候可以再watch函数中监听time的变化来实现我想要的效果。

watch:{
            time:{
                handler:function (newVal,oldVal) {
                	console.log(newVal)
                    if (newVal.value1&&newVal.value2) {
                        this.uploadForm();
                    }
                }
            }
        },