Web-Front-End-Entwicklung, Upload von Avatar-JS-Beispielcode

Diesmal teile ich ein einfaches Beispiel für das Hochladen eines Avatars:

1. Konvertieren Sie das ausgewählte Bild in eine Base64-Zeichenfolge

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

Die obige Methode kann das ausgewählte Bild in eine Base64-Vorschau konvertieren. Zu diesem Zeitpunkt können Sie sehen, was Base64 ist.

2. Gemäß den (Alibaba Cloud) Upload-Anforderungen base64 das Bild einer erstklassigen Verarbeitung unterziehen

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

Zu diesem Zeitpunkt wird nach der ersten Base64-Verarbeitung ein Blob-Objekt zum Hochladen in Alibaba Cloud zurückgegeben. Es ist am besten, die oben genannten Methoden im Dienst und in der Fabrik zu schreiben, damit sie direkt aufgerufen werden können, wenn in Zukunft Bilder hochgeladen werden müssen. Versuchen Sie, sie nicht in den Controller zu schreiben.

3. Die erste Anfrage

$scope.save=function(){//保存
  var pic=binaryPictureBlob($('#preview img').attr('src'),true);//调用该方法得到上传数据
  console.log(pic);
  $http({//接口参数
    url:'',
    method:'',
    headers:{},
    data:{}
  }).success(function(data){
    console.log(data);
　　　　　　//这里讲进行第二次请求
  }).error(function(err1,header1,config1,status1){//处理响应失败
    console.log(err1,header1,config1,status1);
  })
}

Nach dem Klicken auf die Schaltfläche „Speichern“ wird die erste Anfrage auf den lokalen Server hochgeladen tatsächlich hochgeladen Einige Tags und andere Informationen zum Bild. Nach erfolgreichem Hochladen werden eine dem Bild entsprechende Alibaba Cloud-Adresse und eine von Alibaba Cloud hochgeladene Bildadresse zurückgegeben. Zu diesem Zeitpunkt ist die Bildadresse vorübergehend nicht verfügbar.

4. Die zweite Anfrage

$http({
  method:'PUT',
  url:data.UrlForPut,
  headers: {
    'Content-Type':' ',
  },
  data:pic//图像base64字符串去头等处理后的图片信息blob
}).success(function(data2){
  $scope.imgSrc=data.Url;//将服务器的数据的url赋值图片链接
}).error(function(err2,header2,config2,status2){//处理响应失败
  console.log(err2,header2,config2,status2);
});

Hinweis:

Die zu diesem Zeitpunkt angeforderte URL ist die erste Eine feste Adresse, die von der Anfrage zurückgegeben wird (meine hier ist --data.UrlForPut).

Um Fehler beim Hochladen von Alibaba Cloud zu vermeiden, schreiben Sie „Content-Type“:“ oder laden Sie den Header gemäß den Anforderungen von Alibaba Cloud hoch.

Nachdem die zweite Anfrage erfolgreich war, ist die Adresse des Bildes die Adresse des Bildes, das zum ersten Mal zurückgegeben wurde (dies ist eine große Grube, schreiben Sie data.Url nicht als data2.Url).

5. Zu diesem Zeitpunkt sollte alles in Ordnung sein, genießen Sie die schönen Fotos!

Der vollständige Code ist am Ende beigefügt. Ich hoffe, Sie können mir einen Rat geben!
Freundliche Erinnerung: Fügen Sie die Anforderungsparameter selbst hinzu, wenn Sie den Code zum Testen kopieren!

  
  
  
  



  
    选择文件
    
  
  保存
  
头像预览
  

  
上传成功后展示头像
  

    
  



<script>
  function preview(file) {//预览图片得到图片base64
    var prevDiv = document.getElementById(&amp;#39;preview&amp;#39;);
    if (file.files &amp;&amp; file.files[0]) {
      var reader = new FileReader();
      reader.onload = function(evt){
        prevDiv.innerHTML = &amp;#39;&lt;img src=&quot;&amp;#39; + evt.target.result + &amp;#39;&quot; /&gt;&amp;#39;;
      }
      reader.readAsDataURL(file.files[0]);
    } else {
      prevDiv.innerHTML = &amp;#39;&lt;div class=&quot;img&quot; style=&quot;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\&amp;#39;&amp;#39; + file.value + &amp;#39;\&amp;#39;&quot;&gt;&lt;/div&gt;&amp;#39;;
    }
  }
  //以上代码最好写在service或factory里
  angular.module(&#39;webPhotos&#39;,[&#39;ng&#39;])
      .controller(&#39;photos&#39;,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($(&#39;#preview img&#39;).attr(&#39;src&#39;),true);//调用该方法得到上传数据
          $http({//接口参数
            url:&#39;&#39;,
            method:&#39;&#39;,
            headers:{},
            data:{}
          }).success(function(data){//此时上传到本地服务器成功，实际上只是上传了与此图片有关的标记，图片信息还未上传
            $http({
              method:&#39;PUT&#39;,
              url:data.UrlForPut,//上传到本地服务器已经生成地址，但要上传到阿里云后地址才生效有上传的图像显示
              headers: {
                &#39;Content-Type&#39;:&#39; &#39;,//避免阿里云上传时报错或者根据阿里云要求上传header
              },
              data:pic//图像base64字符串去头等处理后的图片信息
            }).success(function(data2){//将图像信息从服务器上传到阿里云
              $scope.imgSrc=data.Url;//将服务器的数据的url赋值图片链接
            }).error(function(err2,header2,config2,status2){//处理响应失败
              console.log(err2,header2,config2,status2);
            });
          }).error(function(err1,header1,config1,status1){//处理响应失败
            console.log(err1,header1,config1,status1);
          })
        }
      })
</script>