在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 创建一个新文件夹