angularjs使用$http post上传文件的时候，怎样获取文件上传的进度

Posted 2023-04-02

参考技术A 对比一下文件大小

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

【中文标题】在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 才能设置正确的边界。