Youpaiyun에 비동기식 업로드에 대한 튜토리얼 Youpaiyun Qiniu Youpaiyun Financing Youpaiyuntu

저자: Bailang 출처: www.manks.top/article/async_upload_to_upyun

이 글의 저작권은 작성자에게 있으며, 재인쇄하셔도 좋습니다. 저자의 동의를 얻어야 하며 기사 페이지의 눈에 띄는 위치에 제공되어야 합니다. 원본 텍스트를 링크해 주세요. 그렇지 않으면 당사가 법적 책임을 물을 권리가 있습니다.

웹사이트의 정적 파일은 Youpaiyun에 저장됩니다. 이전에는 Youpaiyun의 FORM API을 통해 업로드가 이루어졌습니다.

제품 관리자가 고개를 갸웃거리며 다가올 때, 이런 사용자 정보를 업로드해도 새로고침 효과가 없습니다.

그가 한동안 몰래 투덜대면 도대체 무슨 일이야? 이 친구는 이름도 멋있고, 비동기 업로드도 하고, 키도 크고, 품격도 있고, 저랑 꼭 닮았다고 들었어요.

저희 관찰에 따르면 여기에는 두 가지 핵심 사항이 있습니다.

1, 비동기 업로드 구현 방법

2, Youpaiyun에 업로드하는 방법

우선 비동기 업로드를 구현하려면 js에서 FormData 객체를 사용해야 합니다. 이 사람은 ie6 7을 지원하지 않는다고 합니다. ie8은 잘 모르겠습니다. 내 실수에 대해서는 책임지지 않습니다.

하지만 너무 깊게 생각할 필요는 없습니다. 얼마 전 타오바오가 IE6 7을 포기할 것이라는 소식을 들었으니 너무 깊게 생각하지 마세요. ie6 7 내가 그 사람을 잡으면 그 사람이 감히 나를 지지하지 않는다는 이유로 그 사람을 개자식이라고 부를 것입니다. 여기서는 자세히 소개하지 않겠습니다. 직접 검색해 보세요.

먼저 FormData 레이어 사용법을 살펴보겠습니다

viewFormData상상하시겠지만 그냥

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

inputinput가 얼마나 화가 났는지 볼까요

JS이 시점에서 비동기를 위한 프런트엔드 코드를 구현했습니다. Youpaiyun에 필요한

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

매개변수를 포함한 업로드는 policysignature

을 참조하면 됩니다.

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