angularjs之ng-file-upload上传头像

秋建义
2023-12-01

图片上传分为单张上传,多张上传,拖拽上传,裁剪上传

头像上传,上传后会更改头像

<img ng-src="{{personal.avatar}}" ngf-resize="{width: 46, height: 46, quality: .8, type: 'image/*',
 ratio: '1:2', centerCrop: true, pattern='*', restoreExif: false}" ngf-pattern="'image/*'"
     ngf-multiple="false" ngf-select="upload($file)">  
ng-src 为图片默认显示的路径 ngf-resize重新定义图片大小 quality为质量在0.1-1.0之间可选择 类型为图像类型格
式(如.jpg,.png,.gif *代表全部的类型) 照片比例大小为1:2(不懂什么用处)centerCrop为不符合图片大小中心
裁剪图像 pattern模式,形成图案的格式为全部
$scope.upload = function (file) {
  var name = file.$ngfName;  
  var newname = name.substr(-4);   //substr(-4)截取后四位
  var newName = new Date().getTime() + newname;
  Upload.rename(file, newName);  //重新命名
  console.log(file);
  Upload.upload({
    //服务端接收
    url: imgUrl +"/api/containers/avatars/upload",  //url服务器接收的路径 imgurl为一个地址
    //上传的同时带的参数
    data: {file: file}
  }).success(function () {
    $scope.personal.avator = newName;  
  }).error(function () {
    SweetAlert.swal("", "头像上传失败", "warning");
  });
};


 类似资料: