angularjs之ng-file-upload上传头像

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

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

<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");
  });
};


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值