快捷導(dǎo)航

淺析上傳頭像示例及其注意事項

更新時間：2016年12月14日 13:13:43 作者：webNick

本文主要分享一個簡易的上傳頭像示例以及其大致流程、實現(xiàn)過程中需要注意的事項。具有很好的參考價值，需要的朋友一起來看下吧

這次分享一個簡易的上傳頭像示例，其大致流程為：

一、將選擇的圖片轉(zhuǎn)為base64字符串

function preview(file) {//預(yù)覽圖片得到圖片base64
    var prevDiv = document.getElementById('preview');
    if (file.files && file.files[0]) {
      var reader = new FileReader();
      reader.onload = function(evt){
        prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
      }
      reader.readAsDataURL(file.files[0]);
    } else {
      prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
    }
  }

上面的方法可將選擇的圖片轉(zhuǎn)為base64預(yù)覽，此時可以打樁看看base64到底是什么東東。

二、根據(jù)（阿里云）上傳要求，對該圖像base64去頭等處理

var binaryblob = function (s, type) {//blob對象
          var byteString = atob(s);
          var array = [];
          for (var i = 0; i < byteString.length; i++) {
            array.push(byteString.charCodeAt(i));
          }
          return new Blob([new Int8Array(array)], {type: type});
        };
var binaryPictureBlob = function (dataUrl, filterHead) {//上傳base64去頭
          var s = filterHead ? dataUrl.replace(/^data:image\/(png|jpeg|pjpeg|bmp|gif|x-png);base64,/, "") : dataUrl;
          return binaryblob(s, "image/jpeg");
        };

此時將base64去頭等處理后返回一個blob對象用于上傳阿里云。以上方法最好寫在service、factory里，以后有圖像上傳需求時方便直接調(diào)用,盡量不要寫在controller內(nèi)。

三、第一次請求

$scope.save=function(){//保存
  var pic=binaryPictureBlob($('#preview img').attr('src'),true);//調(diào)用該方法得到上傳數(shù)據(jù)
  console.log(pic);
  $http({//接口參數(shù)
    url:'',
    method:'',
    headers:{},
    data:{}
  }).success(function(data){
    console.log(data);
　　　　　　//這里講進行第二次請求
  }).error(function(err1,header1,config1,status1){//處理響應(yīng)失敗
    console.log(err1,header1,config1,status1);
  })
}

點擊保存按鈕后第一次請求是上傳到本地服務(wù)器，實際是上傳一些該圖像的標(biāo)記等信息。上傳成功后會返回一個該圖像對應(yīng)的阿里云地址和一個阿里云上傳圖像的地址，此時該圖像地址暫不可用。

四、第二次請求

$http({
  method:'PUT',
  url:data.UrlForPut,
  headers: {
    'Content-Type':' ',
  },
  data:pic//圖像base64字符串去頭等處理后的圖片信息blob
}).success(function(data2){
  $scope.imgSrc=data.Url;//將服務(wù)器的數(shù)據(jù)的url賦值圖片鏈接
}).error(function(err2,header2,config2,status2){//處理響應(yīng)失敗
  console.log(err2,header2,config2,status2);
});

注意：

此時請求的url是第一次請求返回的一個固定地址（我這里是--data.UrlForPut）。
頭部信息處避免阿里云上傳時報錯寫成'Content-Type':' '或者根據(jù)阿里云要求上傳header。
第二次請求成功后圖片的地址是第一次返回的該圖像的地址（此處是個大坑，data.Url不要寫成data2.Url了）。

五、此時應(yīng)該都o(jì)k了，好好欣賞靚照吧！

最后附上完整代碼，望指教！

友情提示：在復(fù)制代碼測試時請求參數(shù)自己加上哦！

<!DOCTYPE html>
<html ng-app="webPhotos">
<head lang="zh-CN">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>photos</title>
  <style>
    div{text-align:center;border:1px solid #ddd;}
    button,div{margin:10px auto}
    button{border:0;width:200px;height:30px;line-height:30px;font-size:1pc;color:#333;background-color:#0ff;cursor:pointer;border-radius:5px}
    button:hover{background-color:#db7093}
    #preview,.show-img{width:200px;height:200px;}
    #preview img,.show-img img{width:100%;height:100%;}
    .file{position:relative;display:block;width:200px;height:30px;line-height:30px;background:#9acd32;border-radius:5px;margin:10px auto;overflow:hidden;color:#1e88c7;text-decoration:none;text-indent:0}
    .file input{position:absolute;font-size:75pt;right:0;top:0;opacity:0}
    .file:hover{background:#aadffd;border-color:#78c3f3;color:#004974;text-decoration:none}
  </style>
</head>
<body>
<div ng-controller="photos">
  <a href="javascript:;" class="file">
    <span>選擇文件</span>
    <input type="file" onchange="preview(this)" />
  </a>
  <button class="save" ng-click="save()">保存</button>
  <h2>頭像預(yù)覽</h2>
  <div id="preview"></div>
  <h2>上傳成功后展示頭像</h2>
  <div class="show-img">
    <img ng-src={{imgSrc}} alt=""/>
  </div>
</div>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
  function preview(file) {//預(yù)覽圖片得到圖片base64
    var prevDiv = document.getElementById('preview');
    if (file.files && file.files[0]) {
      var reader = new FileReader();
      reader.onload = function(evt){
        prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
      }
      reader.readAsDataURL(file.files[0]);
    } else {
      prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
    }
  }
  //以上代碼最好寫在service或factory里
  angular.module('webPhotos',['ng'])
      .controller('photos',function($scope,$http){
        var binaryblob = function (s, type) {//blob對象
          var byteString = atob(s);
          var array = [];
          for (var i = 0; i < byteString.length; i++) {
            array.push(byteString.charCodeAt(i));
          }
          return new Blob([new Int8Array(array)], {type: type});
        };
        var binaryPictureBlob = function (dataUrl, filterHead) {//上傳base64去頭
          var s = filterHead ? dataUrl.replace(/^data:image\/(png|jpeg|pjpeg|bmp|gif|x-png);base64,/, "") : dataUrl;
          return binaryblob(s, "image/jpeg");
        };
        $scope.save=function(){//保存
          var pic=binaryPictureBlob($('#preview img').attr('src'),true);//調(diào)用該方法得到上傳數(shù)據(jù)
          $http({//接口參數(shù)
            url:'',
            method:'',
            headers:{},
            data:{}
          }).success(function(data){//此時上傳到本地服務(wù)器成功，實際上只是上傳了與此圖片有關(guān)的標(biāo)記，圖片信息還未上傳
            $http({
              method:'PUT',
              url:data.UrlForPut,//上傳到本地服務(wù)器已經(jīng)生成地址，但要上傳到阿里云后地址才生效有上傳的圖像顯示
              headers: {
                'Content-Type':' ',//避免阿里云上傳時報錯或者根據(jù)阿里云要求上傳header
              },
              data:pic//圖像base64字符串去頭等處理后的圖片信息
            }).success(function(data2){//將圖像信息從服務(wù)器上傳到阿里云
              $scope.imgSrc=data.Url;//將服務(wù)器的數(shù)據(jù)的url賦值圖片鏈接
            }).error(function(err2,header2,config2,status2){//處理響應(yīng)失敗
              console.log(err2,header2,config2,status2);
            });
          }).error(function(err1,header1,config1,status1){//處理響應(yīng)失敗
            console.log(err1,header1,config1,status1);
          })
        }
      })
</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: