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

Question

我现在想实现：

1. 点击“提交表单”
2. 调用this.$refs.upload.submit() 手动上传图片
3. 当上传图片成功后接着提交表单的动作

思路应该如何？

Answer 1

用formData手动上传，上传成功再调用提交表单的接口

饿了么UI获取file:

  <el-upload :on-change="fileChange" ></el-upload>
   
data(){
    files:[],//要上传的文件对象
},
methods:{
    fileChange(file){
        this.files.push(file.raw);//上传文件变化时将文件对象push进files数组
    },
    upload(){
        let formData = new FormData();
        formData.append('files',this.files);
        let config = {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        };
        axios.post(uploadUrl,formData,config).then(res=>{
            if(res.code===0){
                this.submitForm();//提交表单
            }
        })
    }
}
       

Answer 2

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

Answer 3

那就监听上传成功后再提交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{
            //提交表单
        }
    })
}