AngularJS使用FormData API上传多个文件

如何解决AngularJS使用FormData API上传多个文件?

开发过程中遇到AngularJS使用FormData API上传多个文件的问题如何解决?下面主要结合日常开发的经验,给出你关于AngularJS使用FormData API上传多个文件的解决方法建议,希望对你解决AngularJS使用FormData API上传多个文件有所启发或帮助;

问题描述

如何使用$ http服务发布FormData

使用FORMDATA API以POST文件和数据,它设定的是很重要的Content-Type头到undefined

var fd = new FormData()
for (var i in $scope.files) {
    fd.append("fileToUpload", $scope.files[i]);
}
var config = {headers: {'Content-Type': undefined}};

var httpPromise = $http.post(url, fd, config);

认情况下,AngularJs框架使用内容类型application/Json。通过设置Content-Type: undefined,AngularJs框架省略了内容类型标头,从而允许XHRAPI设置内容类型。发送FormData对象时,XHR API内容类型设置multipart/form-data具有适当的边界和base64编码。

您是如何获取文件信息的$scope.files

如何启用<input type="file">与之合作ng-model

该指令还可以<input type="file">自动使用ng-changeand ng-form指令。

angular.module("app",[]);



angular.module("app").directive("selectfilesNg", function() {

  return {

    require: "ngModel",

    link: function postlink(scope,elem,attrs,ngModel) {

      elem.on("change", function(e) {

        var files = elem[0].files;

        ngModel.$setVIEwValue(files);

      })

    }

  }

});


<script src="//unpkg.com/angular/angular.Js"></script>

  <body ng-app="app">

    <h1>AngularJs input `type=file` Demo</h1>



    <input type="file" select-files-ng ng-model="fileArray" multiple>



    <code><table ng-show="fileArray.length">

    <tr><td>name</td><td>Date</td><td>Size</td><td>Type</td><tr>

    <tr ng-repeat="file in fileArray">

      <td>{{file.name}}</td>

      <td>{{file.lastModifIEd | date  : 'MMMdd,yyyy'}}</td>

      <td>{{file.size}}</td>

      <td>{{file.type}}</td>

    </tr>

    </table></code>



  </body>

推荐:直接发布二进制文件

使用base64编码添加二进制文件multi-part/form-data效率很低,因为base64编码会增加33%的额外开销。如果服务器API接受带有二进制数据的POST,请直接发布文件

解决方法

我需要使用Laravel
5.1作为后端将图像和视频文件上传到Angular应用程序中的服务器。所有Ajax请求都需要首先发送到Laravel控制器,并且我们在这里有代码说明文件到达那里后如何处理。以前,我们已经完成了普通的HTML表单以将文件上传提交到控制器,但是在这种情况下,我们需要避免刷新表单的页面,因此我尝试通过Angular在Ajax中进行尝试。

我需要将以前通过HTML表单发送到控制器的Ajax信息发送到Laravel控制器吗?

这是Laravel控制器中用于处理文件信息的代码。这就是我需要弄清楚如何发送的内容,因此希望可以重用以下代码:

    $promotion = Promotion::find($id);
    if (Input::hasFile('img_path')){
        $path             = public_path().'/images/promotion/'.$id.'/';
        $file_path        = $path.'promotion.png';
        $delete           = File::delete($file_path);
        $file             = Input::file('img_path');
        $uploadSuccess    = $file->move($path,'promotion.png');
        $promotion->img_path = '/images/promotion/'.$id.'/promotion.png';
    }
    if (Input::hasFile('video_path')){
        $path             = public_path().'/video/promotion/'.$id.'/';
        $file_path        = $path.'promotion.mp4';
        $delete           = File::delete($file_path);
        $file             = Input::file('video_path');
        $uploadSuccess    = $file->move($path,'promotion.mp4');
        $promotion->video_path = '/video/promotion/'.$id.'/promotion.mp4';
    }

正如您在上面看到的,我们会将文件名为promotion.png的任何文件转换为PNG,以便轻松获取,并且仅接受.mp4视频格式。因此,我们不必担心检查文件是否存在以及是否可以覆盖它。因此,您可以在代码中看到我们在保存之前删除了该名称的所有现有文件。

HTML只是带有“文件”类型的输入:

<input type="file" id="img_path" name="img_path" class="promo-img-path" accept="image/*">

我们现在正在使用Angular,所以我不能再通过HTML表单发送以上内容。这就是我需要弄清楚如何做的事情。

我们是两个开发人员,只是尽力而为,因此,我相信有更好的方法可以做到这一点。但是,在重构这一切之前,我希望我可以使用Angular(或将jQuery作为最后的手段)向控制器发送Laravel为了使上述代码正常工作所需的任何文件数据。答案可能很简单,例如“将PUT发送到上面那个控制器中的方法,但是可以使用这种格式的文件信息来代替普通的JSON有效负载,并且可以使用…来收集该信息”。

我也希望将来有更多关于更好的方法的提示。

编程问答相关问答

我的环境详情: <ul> <li>操作系统:Ubuntu 20.04</li> <li>节点版本:9.6.1</li> <li>Qt 版本:5.9.1</li> </ul> 我
此问题使用 <a href="https://people.ucsc.edu/%7Emclapham/eart125/data/georoc.csv" rel="nofollow noreferrer">https://people.ucsc.edu/~
对不起,我正在绞尽脑汁想办法解决这个问题。 我的 kafka 代理说等待连接到 Zookeper 然后关闭(超时)
我有一个 pypsark 数据框保存为 <code>temp_view</code>,我需要将它保存到 <code>Table2</code> 中的 <code>DB2</code>
我想在 <a href="https://www.brightsign.biz/digital-signage-products/XT-product-line/XT1144" rel="nofollow noreferrer">BrightSign XT114
我对 sql 很陌生,一直在尝试使用以下脚本对其进行参数化。 <strong>这是我的代码:</strong> <pre><
<ol> <li>现在我正在考虑为 android 开发一个应用程序并想要获取位置信息。</li> <li>所以我决定使用 xamarin 的
我正在使用 TestNg 运行并行测试,我想在脚本中的某些点停止/终止线程。这个脚本有很多层,所以简单
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注