在Laravel中通过AngularJs上传文件时获取值为null

Posted

技术标签:

【中文标题】在Laravel中通过AngularJs上传文件时获取值为null【英文标题】:Getting value null while uploading file through AngularJs in Laravel 【发布时间】:2020-02-27 04:32:19 【问题描述】:

当我尝试在 Angular Js 中使用 POST 请求上传文件时,我无法上传文件,因为它显示文件值为 null

这是角度部分 app.js

$scope.submitForm = function(api_url , product)
    $http(
        method: 'POST',
        url: enviroment_url + api_url,
        data: product,
        headers: 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    ).then(function successCallback(response) 
        if(response.status == 200)
            toaster.pop('success', "Message", response.data.message, 3000, 'trustedhtml');
        
    , function errorCallback(response) 
        toaster.pop('error', "Message", response.data.message, 3000, 'trustedHtml');
    );

form.blade.php

<form id="myform">
  <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
        </button>
        <h4 class="modal-title float-left" id="Heading">Add Product</h4>
      </div>
        <div class="modal-body">
            <div class="form-group">
                <label>Name<span class="danger">*</span></label>
                <input class="form-control " ng-model="product.name" type="text" placeholder="Enter Product Name">
            </div>
            <div class="form-group">
                <label>Product Image</label>
                <input type="file" file-model='product.img_url' class="form-control" id="upload" />
            </div>
            <div class="form-group">
                <label>Description</label>
                <textarea rows="2" class="form-control" ng-model="product.description" placeholder="Enter Description"></textarea>
            </div>
        </div>
  <div class="modal-footer ">
    <button type="submit" ng-click="submitForm('add-product', product)"
            class="btn btn-warning btn-lg " data-dismiss="modal"
            style="width: 100%;">
        <span class="glyphicon glyphicon-ok-sign"></span>Add
    </button>
  </div>
</div>

fileController.php

public function addProduct(Request $request)

        dd($request->all()); 

OUTPUT dd() 函数的结果

array:1 [
  ""name":"Allen","description":"Sint_dolores_ipsam_n","img_url":" => null
]

【问题讨论】:

$http 服务将 javascript 对象编码为 JSON 格式,而不是 application/x-www-form-urlencoded。 JSON 格式不支持文件。文件 Blob 需要直接发送或附加到 FormData objects,以 multipart/form-data 发送。 How to make POST requests with the FormData API的可能重复 【参考方案1】:

标题中的content type 应该是这样的 'Content-Type': 'multipart/form-data'

【讨论】:

multipart/form-data 标头需要适当的边界。阅读How to make POST requests with the FormData API。对于 AngularJS 框架,将内容类型标头设置为 undefined 非常重要,这样 FormData API 才能设置正确的边界。

以上是关于在Laravel中通过AngularJs上传文件时获取值为null的主要内容,如果未能解决你的问题,请参考以下文章

通过 AngularJS 将多个文件上传到 Laravel 控制器

在docker中通过composer安装laravel时出错

检查文件夹是不是已经存在,如果没有在 laravel 中通过 id 创建一个新文件夹

在 JQuery 中通过 AJAX 上传文件

Laravel 中通过自定义命令创建 service 服务层文件

在 laravel 中通过 ajax 返回视图