如何使用Async Await上传文件/Image Vue js/Laravel Api

Question

我有一个表单，必须保存图像和其他输入的数据，我想使用 Async 并等待访问 api。 这是 Laravel 控制器

 public function addbusiness(Request $request){
  

     return response()->json(["message" => "up"]);
}

这是vue js，这是我的问题，我在将数据发送到控制器和传递它的正确方法时出错，当使用异步等待将所有数据发送到控制器时我应该放什么。并将其保存到数据库中。它返回未定义。在 fetch api 部分上发布方法后，下一步做什么？

data() {
    return {
        items: [
            {
                rank_id: '1',
                product_name: 'Multi Handle Tote Bag with Kalesa Scenery',
                orders: 2500,
                sales: '₱ 350,000',
                rating: '5'
            },

        ],
        redirectChecked: false,
        dropdownIndex: null,
        selectedBarangay: 'Select Barangay',
        barangayList: ['Bangkal', 'Bel-Air', 'Carmona', 'Dasmariñas', 'Forbes Park'],
        searchQuery: '',
        termsAndConditions: false,
        addinfo: {},
        busname: '',
        bustype: '',
        email: '',
        contact: '',
        country: '',
        city: '',
        barangay: '',
        tin: '',
        address: '',
        clearance: '',
        contractlease: '',
        busregistration: '',
        liabilityinsurance: '',
        redirectweb: '',
        lease: '',
        clearance: '',
       
    };
},

这就是功能

 methods: {
    upclearance(event){
        console.log(this.clearance = event.target.files[0])
    },
    uplease(event){
        console.log(this.contractlease = event.target.files[0])
    },
    upregistration(event){
        console.log(this.busregistration = event.target.files[0])
    },
 
    upinsurance(event){
        console.log(this.liabilityinsurance = event.target.files[0])
    },
    async addbusinfo(e){
        e.preventDefault();
        const fd = new FormData();
        fd.append('clearance', this.clearance, this.clearance.name);
         fd.append('contractlease', this.contractlease, this.contractlease.name);
         fd.append('busregistration', this.busregistration, this.busregistration.name);
     
           fd.append('liabilityinsurance', this.liabilityinsurance, this.liabilityinsurance.name);

   
       fd.append('busname', this.busname);
         fd.append('bustype', this.bustype);
          fd.append('email', this.email);
          fd.append('contact', this.contact);
          fd.append('country', this.country);
          fd.append('city', this.city);
          fd.append('barangay', this.barangay);
          fd.append('tin', this.tin);
          fd.append('address', this.address);
          

        console.log(this.busname);
        //console.log(fd);
         await fetch("http://localhost:8000/api/addbusiness",{
                                     method: 'POST',
                                    data: fd,
                            
                                }).then(response => {
                                    console.log(response);
                                }).then(result => {
                                    console.log(result);
                                });


    }
},

Answer 1

您的请求中缺少标头中的内容类型。 像这样在标题中添加内容类型。

headers: { 'Content-Type': 'content/type' },

希望对您有帮助。