Web フロントエンド開発のアップロード アバター 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の非ファーストクラス処理

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オブジェクトが返されますAlibaba Cloud にアップロードするため。将来画像をアップロードする必要があるときに直接呼び出せるように、上記のメソッドをサービスとファクトリーに記述するのが最善です。コントローラーには記述しないようにしてください。

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. 2 番目のリクエスト

$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 の要件に従ってヘッダーをアップロードします。

2 番目のリクエストが成功した後、画像のアドレスは最初に返された画像のアドレスになります (これは大きな落とし穴です。data.Url を data2.Url として書き込まないでください)。

5. この時点ではすべて問題ありません。美しい写真をお楽しみください。

最後に完全なコードを添付してください。アドバイスをいただければ幸いです。
注意事項: テスト用にコードをコピーするときは、リクエスト パラメーターを自分で追加してください。

りー