Youpaiyun 非同期アップロード チュートリアルの詳細な説明 Youpaiyun ファイル アップロード ツール Youpai バッチ アップロード Meituan Cloud Youpai

ウェブサイトの静的ファイルは Youpaiyun に保存されます。以前は、アップロードは Youpaiyun の FORM API を通じて行われていました。

プロダクトマネージャーが首を傾げてあなたに向かって歩いてくると、おっと、このユーザー情報のアップロードには更新効果がありません。

しばらく密かに愚痴をこぼしていると、いったい何が起こっているのでしょうか？この男は素敵な名前を望んでいて、非同期でアップロードし、背が高くて上品で、私に似ていると聞きました。

私たちの観察によると、ここで重要なポイントは 2 つあります:

①、非同期アップロードの実装方法

②、Youpaiyun へのアップロード方法

まず、非同期アップロードを実装したい場合は、 js FormData オブジェクトを使用する必要があります。この人は ie6 7 をサポートしていないと言われています。ie8 についてはよくわかりません。私の間違いは責任がありません。

しかし、少し前に、淘宝網が IE6 7 を廃止すると聞いたので、あまり考えないでください。 ie6 7 もし私が彼を捕まえたら、私はおそらく彼を、どうして私をサポートしないのかという理由で彼を小さな雌犬と呼ぶでしょう。

FormData とは何ですか? ここでは紹介しません。Baidu をご利用ください。

まず、ビュー レイヤーで小さな FormData を使用する方法を見てみましょう

 <input type="file" accept="image/jpg,image/jpeg,image/png,image/gif">
<input type="hidden" name="file"> 

ご想像のとおり、これは単なる入力アップロード ボタンと、画像アドレスを受け取るために予約した非表示の入力です

以下 JS がどれだけ怒っているかを見てみましょう

 <script type="text/javascript">
function($){
 //上传
 $("#upload").on("change", function () {
 //构造FormData对象并赋值
  var formData = new FormData();
  formData.append("policy", "//controller层传递过来upYun的policy配置");
  formData.append("signature", "//controller层传递过来upyun的signature配置");
  formData.append("file", $("#upload")[0].files[0]);
  $.ajax({
   url : "//处理上传的后端程序地址",
   type : "POST",
   data : formData,
   processData : false,
   contentType : false,
   beforeSend: function () {
    //可以做一些正在上传的效果
   },
   success : function(data) {
    //data，我们这里是异步上传到后端程序所返回的图片地址
   },
   error : function(responseStr) {
    console.log(responseStr);
   }
  });
 });
}($);
</script> 

この時点で、Youpaiyun に必要なパラメータ ポリシーと署名を含む、非同期アップロード用のフロントエンド コードを実装しました

残りの実装は Youpaiyun にアップロードされます。簡単です、処理については

https://github.com/upyun/php-sdkを参照できます

上記では、Youpaiyun とアップロードのコンテンツを含む、Youpaiyun 非同期アップロード チュートリアルの詳細な説明を紹介しました。PHP チュートリアルに興味のある友人に役立つことを願っています。