Laravel $request->all() 使用 multipart/form-data 是空的

2022-08-30 16:32:53

我正在发送请求,包括表单数据对象,其中包含从角度4到laravel api的一些数据...有时正确接收请求数据,有时请求为空“空请求”

这是我的请求详细信息

Accept:application/json
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.9
Authorization:Bearer ---------
Connection:keep-alive
Content-Length:973
Content-Type:multipart/form-data; boundary=----WebKitFormBoundarydEkuATdI8JBFdnBM
Host:127.0.0.1:8000
Origin:http://localhost:4200
Referer:http://localhost:4200/shop_admin
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36

请求负载

------WebKitFormBoundarydEkuATdI8JBFdnBM
Content-Disposition: form-data; name="business_id"

249
------WebKitFormBoundarydEkuATdI8JBFdnBM
Content-Disposition: form-data; name="maintenance_flag"

0
------WebKitFormBoundarydEkuATdI8JBFdnBM
Content-Disposition: form-data; name="type"

shop
------WebKitFormBoundarydEkuATdI8JBFdnBM
Content-Disposition: form-data; name="name"

qewqweqweqwe
------WebKitFormBoundarydEkuATdI8JBFdnBM
Content-Disposition: form-data; name="website_uri"


------WebKitFormBoundarydEkuATdI8JBFdnBM
Content-Disposition: form-data; name="phone_number"


------WebKitFormBoundarydEkuATdI8JBFdnBM
Content-Disposition: form-data; name="facebook_link"


------WebKitFormBoundarydEkuATdI8JBFdnBM
Content-Disposition: form-data; name="logo_uri"

uploads/businesses/249/249_1.jpg
------WebKitFormBoundarydEkuATdI8JBFdnBM
Content-Disposition: form-data; name="brands"

undefined
------WebKitFormBoundarydEkuATdI8JBFdnBM--

这是从laravel到控制台的请求的屏幕截图

更新

这是我的代码

角度侧:

表单数据对象这里是角表单数据对象

let formData: FormData = new FormData();
formData.append( 'business_id', that.businessId );
formData.append( 'maintenance_flag', that.maintenance_flag );
formData.append( 'type', edit_type );
formData.append( 'name', name );
formData.append( 'website_uri', website );
formData.append( 'phone_number', phone );
formData.append( 'facebook_link', face );
formData.append( 'logo_uri', that.basicData.logo_uri );
formData.append( 'brands', that.selectedBrands );
if ( pic.files.length > 0 )
  formData.append( 'logo_uri', pic.files[ 0 ] );

应用程序接口:

that.apiService.changeBusiness( formData ).subscribe( ( res ) => 
{
    console.log( res );
}

shopUpdate ( shop_basic_info ){

    return this.http.post( environment.api_base_url + 'api/shop_update', shop_basic_info ).map( res => res.json() );

}

拉拉维尔侧

路线

Route::post('/shop_update', 'ShopController@handleUpdate');

控制器文件

public function handleUpdate(Request $request)
{
    return $request->all();
}

答案 1

这是 PHP 的一个问题。

它不会解析多部分表单数据,除非请求方法是 POST:

https://bugs.php.net/bug.php?id=55815

溶液:

有许多解决方法,没有一个是整洁的,但是:

  1. 使用 PATCH/PUT 作为最佳实践,或者只需在演示场景中使用 POST。

  2. 如果您无法切换方法,那么只需从不使用Formdata中返工代码,PHP就会正确处理该文件。

  3. 发送与 POST 并添加_method:放在表单数据上

(3)像这样:

formData.append('_method', 'PUT')

答案 2

我通过JavaScript在Axios上遇到了这个问题,因为内容类型的标头是多部分表单数据,但边界丢失了。

根据我的研究,处理它的一个好方法是允许Axios自动检测内容类型并正确设置标题本身。

以下是有关如何实现此目的的想法:

const formDataWithFiles = hasFiles ? new FormData() : undefined;

if (formDataWithFiles) {
    // axios will automatically set the content-type to multipart/form-data if the
    // data param is a FormData object
    // otherwise, it will use application/json
    // (study the Dev Tools > Network tab > XHR tab headers)
    Object.keys(modifiedFields)
        .forEach(field => formDataWithFiles.append(field, modifiedFields[field]));
}

const { data } = await axios({
    method,
    url: actionUrl,
    data: hasFiles ? formDataWithFiles : modifiedFields,
    headers: {
        ...axios.defaults.headers,
        ...headers,
    },
});

return data;

上面的代码位于一个通用句柄Submit函数中,可以从客户端的任何位置调用该函数。

下面是函数签名:

const { data } = await this.submitForm({
    actionUrl: this.actionUrl,
    method: this.method,
    modifiedFields: {
        ...this.modifiedUser,
    },
    hasFiles: true,
});

在上面的代码中,有两个用例。第一种是默认情况,其中通过平面对象发送正常负载。第二种情况是表单具有文件并且您想要 .在这种情况下,我们使用 Object 作为容器来指示 Axios 自动检测必要的标头并设置正确的边界。multipart/form-dataFormData

如果未正确指定标头,则可能会在 Laravel 中接收空 Array。$request->all()

对我的答案的简短回答是使用Object,因为它包含的信息比普通的JavaScript对象更多。有了它,您还可以访问:FormData

const formData = new FormData();

console.log('boundary:', formData._boundary);

正如我上面的注释所提示的那样,使用“开发工具>网络”选项卡> XHR 选项卡检查您的请求标头,并确保你具有内容类型或常规表单提交,以及是否正在上传文件。application/jsonapplication/x-www-form-urlencodedmultipart/form-data'


推荐