H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】element中el-upload手动上传成功后才提交表单

我现在想实现:

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

思路应该如何?

回答:

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();//提交表单
            }
        })
    }
}
       

回答:

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

回答:

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

本文地址:H5W3 » 【Web前端问题】element中el-upload手动上传成功后才提交表单

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址