웹 프론트엔드 개발 업로드 아바타 js 샘플 코드 업로드

이번에는 아바타 업로드의 간단한 예를 공유합니다.

1. 선택한 이미지를 base64 문자열로 변환합니다.

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

위 방법을 사용하면 선택한 이미지를 base64 미리보기로 변환할 수 있습니다. 이때, base64가 무엇인지 확인할 수 있습니다.

2. (Alibaba Cloud) 업로드 요구 사항에 따라 base64로 이미지를 1급 처리

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가 먼저 처리된 후 Alibaba Cloud에 업로드하기 위해 blob 개체가 반환됩니다. 위의 메서드를 서비스와 팩토리에 작성하는 것이 가장 좋습니다. 그러면 나중에 이미지를 업로드해야 할 때 직접 호출할 수 있습니다. 컨트롤러에는 작성하지 마세요.

3. 첫 번째 요청

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

저장 버튼을 누른 후 첫 번째 요청은 로컬 서버에 업로드하는 것입니다. 실제로 이미지에 대한 일부 태그와 기타 정보를 업로드하고 있습니다. 업로드가 성공하면 이미지에 해당하는 Alibaba Cloud 주소와 Alibaba Cloud에 업로드된 이미지 주소가 반환됩니다. 이때 이미지 주소는 일시적으로 사용할 수 없습니다.

4. 두 번째 요청

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

참고:

이번에 요청한 URL은 처음입니다. 요청에 의해 반환된 고정 주소(여기서는 --data.UrlForPut입니다).

Alibaba Cloud 업로드 오류를 방지하려면 'Content-Type':' '을 쓰거나 Alibaba Cloud 요구 사항에 따라 헤더를 업로드하세요.

두 번째 요청이 성공한 후 이미지의 주소는 처음 반환된 이미지의 주소가 됩니다(이것은 큰 문제이므로 data.Url을 data2.Url로 쓰지 마십시오).

5. 이제 모든 것이 괜찮을 텐데요, 아름다운 사진을 즐겨보세요!

완전한 코드는 마지막에 첨부되어 있으니 조언 부탁드립니다!
알림: 테스트용 코드를 복사할 때 요청 매개변수를 직접 추가하세요!

  
  
  
  



  
    选择文件
    
  
  保存
  
头像预览
  

  
上传成功后展示头像
  

    
  



<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>