VueJS使用axios将映像传递到存储数据库,如果成功,则将数据传递到phpMyadmin

时间:2020-09-27 04:13:58

标签: php image vue.js axios

我不确定是否有其他方法可以调用两个不同的axios URL,以下是提交功能的代码。

processSubmit(){
    if(this.$refs.form.validate()){ 
      this.ob_personal_document = this.$refs.ob_personal_document.files[0];
      let formImage = new FormData();
      formImage.append('ob_personal_document', this.ob_personal_document);
      this.axios.post('ajaxfile.php', formImage,{
          headers: {
            'Content-Type': 'multipart/form-data'
          }
      }).then(function (response) {
          if(!response.data){
            alert('File not uploaded.');
            }else{
              alert("file is uploaded");
                      let formData = new FormData();
                      formData.append('ob_name', this.ob_name)
                      formData.append('ob_address', this.ob_address)
                      formData.append('ob_mobile',this.ob_country.countryCode + this.ob_mobile)
                      formData.append('ob_state', this.ob_state)
                      formData.append('ob_city', this.ob_city)
                      formData.append('ob_email', this.ob_email)
                      formData.append('ob_contact', this.ob_contact)
                      formData.append('ob_businesstype', this.ob_business_type)
                      formData.append('ob_country', this.ob_country.text)
                      formData.append('ob_payment', this.ob_payment)
                      formData.append('ob_halal', this.ob_halal)
                      formData.append('ob_acc_type', this.ob_acc_type)
                      formData.append('ob_bpname', this.ob_bpname)
                      formData.append('ob_RCno', this.ob_RCno)
                      formData.append('ob_document_type', this.ob_document_type)
                      formData.append('ob_license', this.ob_license)
                      formData.append('ob_ssm', this.ob_ssm)
                      formData.append('ob_person_name', this.ob_person_name)
                      formData.append('ob_ic_number', this.ob_ic_number)
                      formData.append('ob_passport', this.ob_passport)
                      formData.append('ob_personal_document', this.ob_personal_document.name)
                      formData.append('ob_original_address', this.ob_original_address)

                      var owner = {};
                      formData.forEach(function(value, key){
                          owner[key] = value;
                      });
                      this.axios({ 
                          method: 'post',
                          url: 'http://www.example.com/process.php?action=create',
                          data: formData,
                          config: { 
                            headers: {
                              'Content-Type': 
                              'multipart/form-data' 
                            }}
                      }).then(function (response) {
                          console.log(response);
                          this.newOwner.push(owner);
                      });
                      alert("Completed process");                           
          }
      })
      .catch(function (error) {
          console.log(error);
      });
    } else {
      alert("Its not validateed");
    }      
 },

其结果是图像被上传,而数据信息没有被上传到phpMyadmin。我真正想要的是当我按下提交按钮,它将运行processSubmit(),然后如果表单为空,则会弹出错误消息。验证后,它将通过发送到ajaxfile.php将文档上载到文件存储。成功提交后,它将开始将这些表单信息发送到phpMyadmin。

如果两个函数分开,则它们将成功运行。我希望将其放在一个functino中的原因是因为我希望它验证表单,而图像必须是png / jpg / pdf类型,然后只有它才能提交表单。

0 个答案:

没有答案