Youpaiyun 비동기 업로드 튜토리얼 튜토리얼에 대한 자세한 설명 Youpaiyun 파일 업로드 도구 Youpai 일괄 업로드 Meituan Cloud Youpai

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

제품 관리자가 고개를 기울인 채 걸어오면 이런 사용자 정보를 업로드해도 새로고침 효과가 없습니다.

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

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

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

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에 업로드할 수 있습니다.