Youpaiyun への非同期アップロードに関するチュートリアル Youpaiyun Qiniu Youpaiyun Financing Youpaiyuntu

著者: Bailang 出典: www.manks.top/article/async_upload_to_upyun

この記事の著作権は著者に属しており、転載することは歓迎されていますが、この声明は著者の同意なしに保持されなければなりません。テキスト リンクは記事ページのわかりやすい位置に表示される必要があります。そうでない場合は、法的責任を追及する権利が保持されます。

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

当产品经理歪着脑袋走向你的时候，哎呀呀，这用户信息这里，上传要无刷新的效果了。

这他***，自己偷偷抱怨一会会，怎么搞喃？听说这家伙要一个好听的名字，异步上传，高大上档次挺像我的。

根据我们的观察，此处有两个重点：

①、怎么实现异步上传

②、怎么上传到又 拍 云

首先我们要实现异步上传，就需要利用js里面的FormData对象，据说，这家伙不支持ie6 7的，ie8就不太清楚了，据说哈，说错了不负责的。

不过喃，我们也不用考虑辣么多，前段时间都听说淘宝都要放弃ie6 7了，so 甭考虑辣么多了。ie6 7逮着ta估计都要骂ta小婊砸，竟然敢不支持我。

FormData是谁，这里就不多介绍了，可以自行百度。

我们先来看看view层怎么使用FormData这个小婊砸

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

如你所想，仅仅是一个input上传按钮和一个我们预留的准备接收图片地址的隐藏input

下面来看看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>

到此，我们已经实现了异步上传的前端代码，包括又拍云所需要的参数policy和signature

剩下的实现上传到又拍云就简单了，可以参考

https://github.com/upyun/php-sdk 进行处理

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

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

私たちの観察によると、ここには 2 つの重要なポイントがあります: 🎜🎜①、非同期アップロードの実装方法🎜🎜②、Youpaiyun へのアップロード方法🎜🎜 まず第一に、非同期アップロードを実装したい場合は、次を使用する必要があります。 js code> 内の <code>FormData オブジェクトについては、こいつは ie6 7 をサポートしていないと言われています。ie8 についてはよくわかりません。間違い。 🎜🎜ただし、辛さについては考える必要はありません。少し前に、淘宝網が IE6 7 を廃止すると聞いたので、辛さについては考えないでください。 ie6 7 もし私が彼を捕まえたら、私はおそらく彼を、どうして私をサポートしないのかという理由で彼を小さな雌犬と呼ぶでしょう。 🎜🎜 FormData とは何ですか? ここでは紹介しません。Baidu をご利用ください。 🎜🎜まず、view レイヤーがこの小さな FormData をどのように使用するかを見てみましょう🎜rrreee🎜 ご想像のとおり、これは単なる input です。 > アップロード ボタンと、画像アドレスを受け取るために予約した非表示の input です🎜🎜JS がどのように怒っているかを見てみましょう🎜rrreee🎜この時点で、私たちはそれを達成しました非同期アップロードのフロントエンド コードには、Youpaiyun に必要なパラメータ policy と signature が含まれています。実装の残りの部分は、Youpaiyun に簡単にアップロードできます。 🎜🎜 https://github.com/upyun/php-sdk 処理用🎜 🎜 上記では、Youpaiyun とコンテンツのアップロードを含む、Youpaiyun への非同期アップロードのチュートリアルの例を紹介しました。PHP チュートリアルに興味のある友人に役立つことを願っています。 🎜 🎜 🎜