AngularJS如何实现图片上传并实时预览？

AngularJS图片上传和预览功能是现代Web应用中常见的需求，尤其在用户头像、商品图片等场景中应用广泛，本文将详细介绍如何使用AngularJS实现这一功能，包括前端预览、文件验证、异步上传及错误处理等核心环节，帮助开发者构建稳定、高效的用户体验。

功能需求与实现思路

实现图片上传和预览功能需解决三个核心问题：前端实时预览、文件格式与大小验证、安全可靠的后端上传，AngularJS通过双向数据绑定和依赖注入机制，能简化DOM操作与异步请求的处理，具体实现思路为：监听文件选择事件，通过FileReader API读取图片数据并绑定到$scope对象，同时验证文件属性，最后通过$http服务将文件数据上传至服务器。

前端预览实现

前端预览无需等待服务器响应，可提升用户体验，核心步骤如下：

1. HTML模板：使用<input type="file">控件绑定ng-model，并通过ng-change触发预览函数。

   <input type="file" ng-model="file" accept="image/*" ng-change="previewImage()">  
   <img ng-src="{{previewUrl}}" alt="预览图" style="max-width: 200px;">  

2. 预览逻辑：在Controller中通过FileReader读取文件并生成Data URL。

   $scope.previewUrl = '';  
   $scope.previewImage = function() {  
     if ($scope.file && $scope.file.files[0]) {  
       var file = $scope.file.files[0];  
       var reader = new FileReader();  
       reader.onload = function(e) {  
         $scope.previewUrl = e.target.result;  
         $scope.$apply();  
       };  
       reader.readAsDataURL(file);  
     }  
   };  

   此处需注意，ng-model绑定的是DOM元素而非文件对象，需通过files[0]获取实际文件。

文件验证机制

为确保上传安全，需在前端对文件类型、大小进行校验，常见验证规则如下表所示：

示例代码：

$scope.validateImage = function(file) {  
  if (!file) return "请选择文件";  
  if (!file.type.match('image.*')) return "仅支持图片格式";  
  if (file.size > 5 * 1024 * 1024) return "图片大小不能超过5MB";  
  return "";  
};  

异步上传与进度显示

使用AngularJS的$http服务实现文件上传，需设置Content-Type为multipart/form-data，并通过FormData对象封装文件数据，上传进度可通过uploadEventHandlers监听：

$scope.uploadImage = function() {  
  var file = $scope.file.files[0];  
  var error = $scope.validateImage(file);  
  if (error) {  
    alert(error); return;  
  }  
  var formData = new FormData();  
  formData.append('file', file);  
  $http({  
    method: 'POST',  
    url: '/api/upload',  
    data: formData,  
    transformRequest: angular.identity,  
    headers: {'Content-Type': undefined},  
    uploadEventHandlers: {  
      progress: function(e) {  
        if (e.lengthComputable) {  
          $scope.progress = Math.round(e.loaded / e.total * 100);  
        }  
      }  
    }  
  }).success(function(response) {  
    alert('上传成功：' + response.url);  
  }).error(function() {  
    alert('上传失败，请重试');  
  });  
};  

HTML中可添加进度条显示：

<div progress-bar value="progress"></div>  

错误处理与用户体验优化

完善的错误处理能提升应用稳定性，需考虑以下场景：

1. 网络错误：通过$http的.error()回调捕获请求失败，提示用户检查网络连接。
2. 服务器错误：若返回HTTP状态码非200，需根据具体状态码（如500、404）显示不同提示。
3. 跨域问题：若后端接口未配置CORS，需在服务器端添加Access-Control-Allow-Origin头。

可通过ng-disabled控制上传按钮状态，避免重复提交：

<button ng-click="uploadImage()" ng-disabled="isUploading">上传</button>  

在Controller中设置$scope.isUploading = true,上传完成后置为false。

通过AngularJS实现图片上传和预览功能，需综合运用文件API、数据绑定、异步请求等技术，前端预览提升交互体验，文件验证保障安全性，进度条和错误处理优化用户感知，开发者可根据实际需求调整验证规则、上传接口或UI样式，例如增加多图上传、裁剪功能等扩展能力,以满足更复杂的业务场景。