AngularJS文件上传问题求助：无法上传图片至assets文件夹

我帮你排查下代码里的问题，一步步解决文件上传失败的情况：

1. 指令里的低级拼写错误 #

你的fileModel指令中，link函数的参数写成了elemesnt，正确的应该是element。这个拼写错误会导致无法绑定文件选择的change事件，$scope.files根本获取不到你选择的文件，这是最基础的问题：

// 错误写法
link: function(scope, elemesnt, attrs) {
// 正确写法
link: function(scope, element, attrs) {

2. POST请求的URL指向错误 #

你现在把请求直接发到了文件夹路径http://192.168.1.161/www/ci_practice/assets/，但HTTP POST请求需要指向后端处理脚本（比如PHP、Python等），文件夹本身没法处理文件上传请求。你必须写一个后端脚本来接收前端传的FormData，然后把文件保存到assets文件夹里。

3. 修正后的完整前端代码 #

这里是修正了拼写错误、优化了错误处理的前端代码：

angular.module('myApp', [])
 .directive('fileModel', ['$parse', function ($parse) {
 return {
 restrict: 'A',
 link: function(scope, element, attrs) { // 修正拼写错误
 element.bind('change', function(){
 // 把选中的文件赋值到scope的对应属性上
 $parse(attrs.fileModel).assign(scope, element[0].files)
 scope.$apply();
 });
 }
 };
 }])
 .controller('myCtrl', ['$scope', '$http', function($scope, $http){
 $scope.uploadFile=function(){
 // 先判断是否选择了文件
 if (!$scope.files || $scope.files.length === 0) {
 console.log('请先选择要上传的文件哦');
 return;
 }
 var fd=new FormData();
 // 用数组形式append，方便后端接收多个文件
 angular.forEach($scope.files,function(file){
 fd.append('uploaded_files[]', file);
 });
 // 这里替换成你的后端处理脚本URL，比如upload.php
 $http.post('http://192.168.1.161/www/ci_practice/upload.php', fd, {
 transformRequest: angular.identity,
 headers: {'Content-Type': undefined}
 }).then(function(response) { 
 // 推荐用then代替已经废弃的success方法
 console.log('上传结果:', response.data);
 }, function(error) {
 console.error('上传失败了:', error);
 });
 }
 }]);

4. 后端处理示例（以PHP为例） #

你需要在ci_practice目录下创建一个upload.php文件，负责接收前端传的文件并保存到assets文件夹，示例代码如下：

<?php
// 设置允许上传的图片类型
$allowed_mime_types = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
// 目标保存文件夹
$upload_directory = 'assets/';

// 检查目标文件夹是否存在，不存在则创建
if (!is_dir($upload_directory)) {
 mkdir($upload_directory, 0755, true);
}

// 处理上传的文件
if (isset($_FILES['uploaded_files'])) {
 $uploaded_files = $_FILES['uploaded_files'];
 $upload_results = [];

 // 遍历所有上传的文件
 foreach ($uploaded_files['name'] as $index => $file_name) {
 $file_tmp_path = $uploaded_files['tmp_name'][$index];
 $file_mime_type = $uploaded_files['type'][$index];
 $file_error = $uploaded_files['error'][$index];

 // 检查文件是否有上传错误
 if ($file_error !== UPLOAD_ERR_OK) {
 $upload_results[] = "文件 $file_name 上传出错，错误码：$file_error";
 continue;
 }

 // 检查文件类型是否允许
 if (!in_array($file_mime_type, $allowed_mime_types)) {
 $upload_results[] = "文件 $file_name 类型不允许，仅支持图片文件";
 continue;
 }

 // 生成目标文件路径（可以加时间戳避免重名）
 $target_file_name = uniqid() . '_' . basename($file_name);
 $target_file_path = $upload_directory . $target_file_name;

 // 移动临时文件到目标文件夹
 if (move_uploaded_file($file_tmp_path, $target_file_path)) {
 $upload_results[] = "文件 $file_name 上传成功，保存路径：$target_file_path";
 } else {
 $upload_results[] = "文件 $file_name 保存失败，请检查文件夹权限";
 }
 }

 // 返回JSON格式的结果
 header('Content-Type: application/json');
 echo json_encode($upload_results);
} else {
 header('Content-Type: application/json');
 echo json_encode(['error' => '没有接收到任何上传的文件']);
}
?>

5. 必须注意的几个点 #

• 文件夹权限：确保assets文件夹有写入权限（Linux下设置权限为755，Windows下确保Web服务器用户有写入权限）。
• 文件大小限制：如果要上传大图片，需要修改php.ini里的upload_max_filesize和post_max_size参数，比如设置成upload_max_filesize = 10M。
• 文件名重复：示例代码里用了uniqid()来避免同名文件覆盖，你可以根据需求调整命名规则。

内容的提问来源于stack exchange，提问作者sachin