使用 angularjs 将图像传递到后端

Posted 2023-03-22

【中文标题】使用 angularjs 将图像传递到后端

【英文标题】：Passing an Image to the backend with angularjs

【发布时间】：2021-01-18 10:47:18

【问题描述】：

我无法理解如何使用 angularjs 将图像上传到我的服务器（现在是我的本地主机）。

在我的前端，我使用了一个带有角度指令的模型：

 main.php
 <form>
     <div class="form-group">
           <label for="myFileField">Select a file: </label>
        <input type="file" file-model="MenuItem.myFile"  class="form-control" id ="myFileField"/>
     </div>
    <button ng-click="uploadFile()" class = "btn btn-primary">Upload File</button>
 </form> 

然后是指令：

 app.js
 app.directive('fileModel', ['$parse', function ($parse) 
    return 
       restrict: 'A',
       link: function(scope, element, attrs) 
          var model = $parse(attrs.fileModel);
          var modelSetter = model.assign;

          element.bind('change', function()

             scope.$apply(function()
                modelSetter(scope, element[0].files[0]);
             );
          );
       
    ;
 ]);

在我的 JS 中，我从我的范围内获取文件。

$scope.uploadFile = function() 
 var file = $scope.MenuItem.myFile;
 console.log(file);
 console.log($scope.MenuItem);s

 qData = 
   file_name: file['name'],
   file_type: file['type'],
   file_size: file['size'],
 

 console.log(qData);
 qF(qData, 'uploadImage');
;

为了解释上面的代码，我只是尝试打印出上面的信息并将其发送到我的后端文件。 “qF”函数获取 qData 中的所有变量，并通过 post 将它们传递给我指定的任何 php 文件。

问题是我为后端找到的所有解决方案都涉及“tmp_name”变量，但我传递给 php 的“文件”对象没有“tmp_name”。当我控制台注销“文件”变量时，这是输出：

FILE:
lastModified: 1601663109351  
lastModifiedDate: Fri Oct 02 2020 13:25:09 GMT-0500 (Central Daylight Time) 
name: "SmallDoc.txt"
size: 0
type: "text/plain"
webkitRelativePath: ""
__proto__: File

我也不知道 webkitRelativePath 是什么。如果我能得到 tmp_name，我就知道在后端该做什么了。有没有办法使用没有此变量的php文件将文件上传到硬编码位置，如果没有，我该如何获取它。

我的 xampp 中的 php.ini：

> ;;;;;;;;;;;;;;;; ; File Uploads ; ;;;;;;;;;;;;;;;;
> 
> ; Whether to allow HTTP file uploads. ; http://php.net/file-uploads
> file_uploads=On
> 
> ; Temporary directory for HTTP uploaded files (will use system default
> if not ; specified). ; http://php.net/upload-tmp-dir
> upload_tmp_dir="C:\xampp\tmp"
> 
> ; Maximum allowed size for uploaded files. ;
> http://php.net/upload-max-filesize upload_max_filesize=2000M
> 
> ; Maximum number of files that can be uploaded via a single request
> max_file_uploads=20

为了清楚起见，我遇到的问题是我基本上只是不确定如何完成从上传表单中获取图像一直到存储在我的服务器/本地主机上的操作。我基本上被卡住了，无法将其移过我的 JS。

【问题讨论】：

不清楚。似乎有什么问题？什么不工作？

我一直在向 JS 获取有关文件的信息，但我不知道如何将文件获取到/使用 php 将文件实际存储在我的服务器上。

【参考方案1】：

当您将文件上传到启用 php 的网络服务器时，它会将文件临时存储在您在 php.ini 中指定的路径 upload_tmp_dir 中。在脚本执行期间，您可以将此文件移动或复制到您想要的位置（如项目文件夹）。执行结束后，文件会自动从 temp_dir 中删除。

您可以通过$_FILES["file"]["tmp_name"] 获取此路径，然后您可以使用move_uploaded_file 等函数移动此文件或copy 将此文件复制到您的项目目录。

【讨论】：

感谢您的信息。当我执行“print_r($_FILES)”时，它返回一个空数组。我错过了上传步骤吗？

@BrennanVanDyke 您可能没有正确发送此文件。 ***.com/questions/40214772/file-upload-in-angular