Node.js는 IE789와 호환되는 파일 업로드 진행 표시줄을 구현합니다.

Nodejs의 파일 업로드 처리

Express4에서는 req.files가 이미 정의되어 있지 않습니다. 현재 가장 일반적으로 사용되는 것은 아마도 진행률 표시줄이 있다는 사실을 알고 계실 것입니다. IE 버전이 작동 중입니다. 시도해 보세요.

form
.on('error',function(err){
 console.log(err);
})
.on('aborted',function(){
 console.log('aborted');
})
.on('progress',function(bytesReceived, bytesExpected){
 var n=parseInt(parseFloat(bytesReceived/bytesExpected).toFixed(2)*100);
 console.log(n);
});

예, 반갑습니다. 콘솔이 예상대로 인쇄됩니다. 그런 다음 한 단계 더 나아갑니다.

form
.on('progress',function(bytesReceived, bytesExpected){
 var n=parseInt(parseFloat(bytesReceived/bytesExpected).toFixed(2)*100);
 res.write(&#39;<script>window.parent.call(&#39;+n+&#39;)</script>&#39;);
 //无刷新上传，你们懂的 console.log(n);
});

호출 메서드는 불행하게도 끝 100만 볼 수 있습니다. %, 업로드의 구체적이고 상세한 진행 값을 볼 수 없습니다.

아이디어를 변경하여 세션에서 진행 값을 저장하고 추가 요청을 추가해 보겠습니다. 진행 상황을 조사해 보세요. 아, 나쁘지 않군요! 요청의 진행 값이 다른 업로드의 진행 값이 아닌 현재 업로드의 진행 값인지 확인하려면 업로드 요청 및 추가 요청의 토큰 값에 동의해야 합니다. 이제 또 다른 질문이 발생합니다. 요청할 때 값을 지정하려면 이 토큰을 얻은 후 파일 업로드의 요청 본문이 요청 페이로드에 있으므로 req.body는 전달된 값을 얻을 수 없습니다. 물론 이 파일을 구문 분석하고 싶지는 않습니다. 구문 분석하지 말고 URL에 넣는 것이 가장 좋습니다. 문제 문제는 때때로 토큰을 두 번 새로 고쳐야 한다는 것인데, 이는 좋지 않습니다. 쿠키에 넣을 수밖에 없어요!

var cookies=function () {
 var cks=req.headers.cookie.split(';'),obj={};
 for(var i=0;i<cks.length;i++){
  obj[cks[i].split(&#39;=&#39;)[0].replace(/\s+/ig,&#39;&#39;)]=unescape(cks[i].split(&#39;=&#39;)[1]);
 }
 return obj;
}();
var queryToken=cookies.__token__;
 
form .on(&#39;progress&#39;,function(bytesReceived, bytesExpected){
 var n=parseInt(parseFloat(form.bytesReceived/form.bytesExpected).toFixed(2)*100);
 if (req.session[&#39;file&#39;+queryToken]) { 
  req.session[&#39;file&#39;+queryToken].percent=n;
 }else{
  req.session[&#39;file&#39;+queryToken]={
   token:queryToken,
   percent:n
  }
 };
 console.log(n);
});

IE789 진행률 설문조사를 하러 왔는데, 정말 마음이 아프네요. 🎜>

호출 방법은 페이지에 진행률 값을 표시하지만 안타깝게도 마지막 100%만 볼 수 있으며 업로드의 구체적이고 자세한 진행률 값을 다시 볼 수 없습니다... .

var getData=function(){
 $.post('/uploader',{
  getfileinfo:1,
  uploadtoken:utils.cookie.getCookie('__token__')
 })
 .then(function(data){
  console.log(data);
  if (data.mes<0) {
   getData();
  }else{
   var pros=data.info;
   call(pros.percent);
   if (pros.percent!=&#39;100&#39;) {
    getData();
   };
  };
 });
}
getData();

그래, 또 문제에 빠졌는데, 그래도 뭔가 문제가 있는 것 같아. Ajax 폴링에는 문제가 없는데, 문제는 세션의 값이 업로드가 완료될 때까지 기다려야 한다는 점이다. 100%만 보이는데 안보이네요 자세한 진행값은 이전 res.write와 이번에는 req.session이 일시정지인데 진행이 완료될 때까지 각각의 실행 결과를 저장하고 있다고 생각하면 될까요? 공개하니까 100% 나만 볼 수 있는 거고, 당연히 이해가 안 되니까 그냥 그렇게 생각할게요!

Ajax 폴링은 괜찮으므로 세션에 저장하는 것은 문제가 되지 않습니다. 작동하지 않으면 전역 개체에 값을 넣어도 중단되지 않습니다. 개체를 변경하고 전역에 넣습니다.

계속해서 폴링합니다.

form
.on('progress',function(bytesReceived, bytesExpected){
 var n=parseInt(parseFloat(form.bytesReceived/form.bytesExpected).toFixed(2)*100);
 if (global['file'+queryToken]) {
  global['file'+queryToken].percent=n;
 }else{
  global['file'+queryToken]={
   token:queryToken,
   percent:n
  }
 };
 console.log(n);
});

예뻐요, 딱 그래요! 크롬에서 보는 것은 HTML5의 진행과 동일합니다. 단, IE789에서는 약간 멈춘 듯한 느낌이 들지만 결국에는 자세한 진행 값을 볼 수 있습니다. 이전 브라우저도 그다지 좋지 않습니다. 예, 업로드될 때마다 전역에 값이 추가됩니다. 파일을 업로드하고 지정된 디렉터리로 전송한 후에는 global['file'+queryToken]=null;

그런데 라운드 쿼리는 요청이 연이어 발생한다는 의미인데 여기서는 문제가 있을 수 있는데, 이를 제한하여 500ms마다 진행률 값을 요청하면 되지 않을까요? 그럼 IE789 진행률 표시줄은 이렇게 해결되고 우리는 던지기로 합의했습니다. 이 폴링은 모든 브라우저와 호환되지만 결국 낭비되는 요청이 너무 많기 때문에 판단하여 IE789 외에 HTML5를 계속하는 것이 좋습니다!

사실 따져보면 플래시 추가 업로드와 추가 요청 중 어느 쪽이 더 가치가 있나요? 플래시를 이해하지 못하는 점 양해 부탁드립니다. 페이지에 추가 파일을 추가하는 것이 마음에 들지 않습니다. ;

요약

파일 업로드 구성 요소에 대해서는 아직 처리해야 할 세부 사항이 많이 있습니다. 원래는 JS 파일을 만들고 싶었지만. 그러다가 고민하다가, 재사용성을 높이기 위해 JS 파일로 사용하기로 했습니다. 업로드해야 할 곳마다 iframe을 사용하는 것이 확실히 훨씬 낫습니다. JS 파일. 이상이 이 글의 전체 내용입니다. 모든 분들의 공부나 업무에 조금이나마 도움이 되었으면 좋겠습니다. 궁금한 점이 있으시면 메시지를 남겨주세요.

IE789 호환 파일 업로드 진행률 표시줄의 Node.js 구현 관련 기사를 더 보려면 PHP 중국어 웹사이트에 주목하세요!