element中el-upload手动上传成功后才提交表单

Question

我现在想实现：点击“提交表单”调用this.$refs.upload.submit() 手动上传图片当上传图片成功后接着提交表单的动作思路应该如何？

Answer 1

我是这么实现的, 用ref获取到element中el-upload 的file数据, 然后手动上传附件 返回promise后在提交表单

Answer 2

那就监听上传成功后再提交formdata咯

<el-upload ref="upload" :on-success="uploadOnSuccess" :on-error="uploadOnError"></el-upload>

methods

uploadOnError(){

    this.$message.warning("图片上传出错！")

},

uploadOnSuccess(){

    //图片上传成功

    this.handleSubmit();

},

handleSubmit(){

    //验证表单

    this.$refs.myForm.validate((valid) => {

        if(!valid){

            //表单出错啦

        }else{

            //提交表单

        }

    })

}